jquery select change get data attribute value for each tr td in The table contains dynamically generated rows

I’ve created a table with two rows, with the ability to create additional rows dynamically; the problem I’m having is that I want to make the value of the last cell in any row related to the user’s choice from the drop-down list in the first cell in the row.

I have code that works, but it only works on the first row correctly and repeats printing the same value in all next rows, any good suggestion would be appreciated and thank you;

my problem is here:

<script>
  $('#select_acount').on('change', function() {
  $('.mount').val($(this).val());
});
</script>

html code :

<td> <select class="form-control select2" id="select_acount"  required>
<option value="">--الحساب--</option>
<?php
  $query = "select * from sah7atmain_acouts WHERE company like '".$multi."'";
  $result = mysqli_query($con,$query);
  if($result) {
    while($row = mysqli_fetch_assoc($result)){
?>   
      <?php echo '<option  value="'.$row['acount_mounte'].'">'.$row['acount_name'].'</option>'?>;
      <?php
    }
  } else{
}
?>
</select></td>
<td> 
<input type="number" name="debtor[]" id="fname"class="form-control quantity arabicNumbers" onkeydown="return event.keyCode !== 69" required> </td>
<td> <input type="number" name="creditor[]" id="james" class="form-control amount arabicNumbers" onkeydown="return event.keyCode !== 69" required> </td>
<td> <input type="text"  name="description[]" class="form-control"  required> </td>
<td> <input type="text" name="mount[]" class="form-control mount"   required> </td>

</tr>

<tr>
<td> <select class="form-control select2"  required>
<option value="">--الحساب--</option>
<?php
$query = "select * from sah7atmain_acouts WHERE company like '".$multi."'";
$result = mysqli_query($con,$query);
if($result)
{
while($row = mysqli_fetch_assoc($result)){
?>

<?php echo '<option value="'.$row['acount_name'].'">'.$row['acount_name'].'</option>'?>;
<?php
}
} else{
}
?>
</select></td>
<td> <input type="number" name="debtor[]" id="fname"class="form-control quantity arabicNumbers" onkeydown="return event.keyCode !== 69" pattern="[0-9]*"required> </td>
<td> <input type="number" name="creditor[]" id="james" class="form-control amount arabicNumbers" onkeydown="return event.keyCode !== 69" pattern="[0-9]*"required> </td>
<td> <input type="text"  name="description[]" class="form-control"  required> </td>
<td> <input type="text" name="mount[]" class="form-control mount" id="mount" required> </td>
<td> <button type="button" id="add" class="btn btn-success"><i class="fas fa-plus"></i></button></td>

Answer

instead of id use class as you can use 1 id only once in a particular page. so your code would be:

$('.select_acount').on('change', function() {
   $(this).closest('tr').find('.mount').val($(this).val());
});

closest will find your nearest tr to your select button inside which it will find element with mount class and update value there

Advertisement

Answer