php - Run jquery function from all elements of foreach loop

one text

Solution:

You can use $value as id of tbody for particular user table and when user click on submit button get the value of input using $(this).find("input[name=value]").val() and then use $('#' + value).append(html); to append data to tbody for particular user table only .Also, only change you need to make in your html code is adding id to tbody ie. :<tbody id="<?= htmlspecialchars($value); ?>"> .

Demo Code :

$('form').on('submit', function(event) {
  event.preventDefault();
  var $this = $(this)
  var value = $(this).find("input[name=value]").val(); //get hidden input value
  console.log(value)
  /* $.ajax({
     url: "insert.php",
     method: "POST",
     data: $(this).serialize(),
     dataType: "json",
     beforeSend: function() {
       $('#add').attr('disabled', 'disabled');
     },
     success: function(data) {
       $('#add').attr('disabled', false);
       if (data.item_name) {
         var html = '<tr>';
         html += '<td>' + data.item_name + '</td>';
         html += '<td>' + data.item_height + '</td>';
         html += '<td>' + data.item_width + '</td>';
         html += '<td>' + data.item_color + '</td></tr>';*/
  var html = "<tr><td colspan='4'>append me</td></tr>";
  $('#' + value).append(html); //append data 
  $this[0].reset();

  /* }
    }
  })*/

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="add_details">
  <input type="hidden" name="value" value="something" />
  <div class="form-group">
    <label>Item name</label>
    <input type="text" name="item_name" class="form-control" required />
  </div>
  <div class="form-group">
    <input type="submit" name="add" id="add" class="btnn btn-success" value="Add" />
  </div>
</form>

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Height</th>
      <th>Width</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody id="something">

  </tbody>
</table>
<form method="post" id="add_details">
  <input type="hidden" name="value" value="something1" />
  <div class="form-group">
    <label>Item name</label>
    <input type="text" name="item_name" class="form-control" required />
  </div>
  <div class="form-group">
    <input type="submit" name="add" id="add" class="btnn btn-success" value="Add" />
  </div>
</form>

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Height</th>
      <th>Width</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody id="something1">

  </tbody>
</table>

Source