Assign dynamic select values to respective dynamic textboxes

[coderscoven]

Hello guys, i have the following script which adds new rows dynamically on clicking button with id of 'add_row_btn'. Every row added has select option which fetches information from mysql and loads them in the option values.

My problem comes in the part of the script which i have commented out. Every option selected should display its value to its next respective textbox.

Note that the every row added, has a different class name to the previous with the addition of an increment variable (i) at the end.

Any assistance is welcome. Thanks.

$(document).ready(function(){
    var i=1;
    $("#add_row_btn").on('click',function(){
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td><select class='form-control input_order_name_class"+i+
                        "' name='input_order_name[]"+i+
                        "' required> <?php $order_qry = $conn->prepare('select kit_menu_key, kit_menu_name from kitchen_menu order by kit_menu_name'); $order_qry->execute(); $order_q = $order_qry->fetchAll(); ?> <option selected disabled>--select--</option> <?php foreach($order_q as $row){?> <option value='<?php echo $row['kit_menu_key']; ?>'><?php echo $row['kit_menu_key']; ?></option> <?php } ?></select></td><td><input type='text' class='form-control order_price"+i+
                        "' name='input_order_name_price[]"+i+
                        "' placeholder='enter price' required></td><td><input type='text' class='form-control input_order_name_plates_class' name='input_order_name_plates[]"+i+
                        "' placeholder='enter number of plates' required></td><td><input type='text' class='form-control data-total-cost' name='input_order_name_tcost[]"+i+
                        "' placeholder='total cost' required ></td>");
      $('#kitchen_sales_table').append('<tr id="addr'+(i+1)+'"></tr>');
      
         /* Problem here
            $(".input_order_name_class"+(i)).on("change",function(){                
                $(".order_price"+(i)).val($(this).val());
            });
        */
        i++;

    });
  });

Here is the html table and the add row button

 <table class="table table-bordered table-condensed" id="kitchen_sales_table">
                                    
                                    <thead>
                                        <tr class="success text-primary">
                                            <th>No</th>
                                            <th>Order Name</th>
                                            <th>Price</th>
                                            <th>Plates No</th>
                                            <th>Total Cost</th>
                                        </tr>                                    
                                    </thead>
                                    
                                    <tbody>
                                        
    <tr id='addr0'>
        <td>
            1
        </td>
        <td>
            <select class='form-control ui_order_name_signal' name='input_order_name[]' id='input_order_name' required>
                <?php
                $order_qry = $conn->prepare('select kit_menu_key, kit_menu_name from kitchen_menu order by kit_menu_name');
                $order_qry->execute();
                $order_q = $order_qry->fetchAll();
                ?>    
                <option selected disabled>--select--</option>
                <?php foreach($order_q as $row){?>
                <option value='<?php echo $row['kit_menu_key']; ?>'><?php echo $row['kit_menu_name']; ?></option>
                <?php } ?>
            </select>
        </td>
        <td>
            <input type='text' class='form-control ui_price_signal' name='input_order_name_price' id='input_order_name_price' placeholder='enter price' required>
        </td>
        <td>
            <input type='text' class='form-control input_order_name_plates_class' name='input_order_name_plates' id='input_order_name_plates' placeholder='enter number of plates' required>
        </td>
        <td>
            <input type='text' class='form-control data-total-cost' name='input_order_name_tcost' id='input_order_name_tcost' placeholder='total cost' required>            
        </td>
    </tr>
    <tr id='addr1'>
        </tr>

            </tbody>
                                    
        </table>
<button type="button"  id="add_row_btn" class="btn btn-xs bg-green">Add Another Order</button>

[Sepodati]

Not sure at all on this, but I remember something like this being an issue because your just adding a string and not actually creating DOM nodes? Although the ability to address "#addr2" and change its HTML seems to contradict that...

 

What if you just throw an alert on the on change bit for the new HTML? Does the event even get triggered?

 

What if you hard coded .input_order_name_class1 (actual number, not the I'd variable) with an alert in the on change function. Does that get triggered?

[coderscoven]

The event is triggered if i was to just use .input_order_name_class1 since this is the first class of the select in the new row.

The reason why i added the (i); i was trying to see if it would be assigning the class names on adding every new row. Some thing like;

/* for added row one */
   $(".input_order_name_class1").on("change",function(){                
                $(".order_price1").val($(this).val());
            });

/* for added row two */
   $(".input_order_name_class2").on("change",function(){                
                $(".order_price2").val($(this).val());
            });

/* And so on...*/

Is there a way i could use something like an array of sorts say eg. classname?