Jquery search function not working for all table rows.. it is working for only first row of table. when i add new row it is not working

Question

below is js code: I have used jquery for this & created function adding & removing rows

but this one is failing for newly added rows

not able to search in newly added rows

$(document).ready(function() {
  var html = '<tr><td class="cb"><input class="form-control" type="text" value="" id="inputString" name="inputString"/><div id="showList"><ul class="list-group"></ul></div></td><td><input type="checkbox" name="debit" class="form-control"></td><td><input type="checkbox" name="credit" class="form-control"></td><td><input type="number" name="amount" class="form-control"></td><td><input class="btn btn-warning" type="button" name="remove" id="remove" value="Remove" onclick="removeMe(this);"></td></tr>';

  var x = 1;

  $("#add").click(function() {
    $("#table_field").append(html);
  });

  $('#inputString').keyup(function() {
    var search = $('#inputString').val();
    if (search != '' && search != null) {
      $.ajax({
        type: 'POST',
        url: 'ledgers.jsp',
        data: 'key=' + search,
        success: function(data) {
          $('#showList').html(data);
        }
      });
    } else {
      $('#showList').html('');
    }
  });
  $(document).on('click', 'li', function() {
    $('#inputString').val($(this).text());
    $('#showList').html('');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>