Get values from a dynamic drop-down list and show them in a dynamic text box-CodePudding

I have a table with dynamically generated rows, the first row is not dynamic and I want to show and print the values according to the choice made by the user from the dynamic dropdown list, I have jQuery and PHP code that only works in the first non-dynamic row and does not work in the rest of the new dynamic rows and I want to make the feature work In each new dynamic row that is generated, only the value associated with the user's selection appears (for example: the invoice system drop-down list contains the name of the product, and the price of the product appears in another text box when selecting any product from the drop-down list)

The problem is shown in the picture php code: `

<select  name="account[]"required>
                            <option value="">--الحساب--</option>
                            <?php
                            $query = "select * from sah7atmain_acouts WHERE company like '".$multi."'";
                            $result = mysqli_query($con,$query);
                            $data = array();
                            if($result)
                            {
                              while($row = mysqli_fetch_assoc($result)){
                              $data[] = $row;
                            ?>
                            <?php echo '<option value="'.$row['acount_mounte'].'">'.$row['acount_name'].'</option>'?>;
                            <?php
                            }
                            } else{
                            }
                            ?>
                            </select>

jquery code:

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

Dynamic code generation using JaQuery"

 var data = <?php echo json_encode($data); ?>;
      var product_dd = "";
          product_dd  = '<select  name="account[]"required>';
          product_dd  = '<option value="">--الحساب--</option>';
      if(data.length > 0){
        for(let i = 0; i < data.length; i   ) {
          product_dd  = `<option value="${data[i]['acount_mounte']}">${data[i]['acount_name']}</option>`;
        }
      }
         product_dd  = "</select>";
      
      var i = 0;
      $("#add-btn").click(function() {
          i;
        
        $("#dynamicAddRemove").append('<tr><td >' product_dd '</td> <td ><input type="number" name="debtor['   i   ']" id="fname" onkeydown="return event.keyCode !== 69" required></td> <td ><input type="number" name="creditor['   i   ']" id="james"  onkeydown="return event.keyCode !== 69" required></td> <td ><input type="text"  name="description['   i   ']"   required></td> <td> <input type="text" name="mount['   i   ']"  required></td><td ><button type="button" name="add" ><i  ></i></button></td></tr>');
      });
      $(document).on('click', '.remove-tr', function() {
        $(this).parents('tr').remove();
      });

CodePudding user response：

Since you are using jQuery, I would recommend using a delegated event handler approach and add your event to the table/container element of your dynamic rows, so your event listener declaration would look like this:

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

This way your event will fire for every newly added row. More information on event delegation: jQuery-event-delegation