Multiple two inputs and the inputs generated dynamically by jQuery

Question

I have this form and this is my layout:

I want when the user enters the quantity the total input = qty*price.

My view

 <?php $form=array('id'=>'myform');?>
    <?php echo form_open('Order/submit',$form);?>
        <div class="panel panel-default">
            <div class="panel-heading">Customer Details</div>
            <div class="panel-body">
                <div class="col-xs-3">
                        <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="customer_name">
                            <?php foreach ($customerdata as $c):
                                echo "<option  value ='$c->c_id'>" . $c->c_name . "</option>";
                            endforeach;
                            ?>
                        </select>
                </div>
                <div class="col-xs-3">
                        <input type="text" class="form-control" name="invoice_number"  placeholder="Invoice Number"/>
                </div>
                <div class="col-xs-3">
                        <input type="text" class="form-control" name="branch"  placeholder="Branch"/>
                </div>
                <div class="col-xs-3">
                        <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="payment_term"">
                            <option value="cash">Cash</option>
                            <option value="bank">Bank</option>
                            <option value="other">Other</option>
                        </select>
                </div>
            </div><!--customer panel-Body-->
            <div class="panel-heading">Invoice Details
            </div>

            <div class="panel-body">

                <div id="education_fields">


                <div class="col-sm-3 nopadding">
                    <div class="form-group">
                        <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]">
                            <option></option>
                            <?php
                            foreach($order as $row):
                                echo"<option data-price='$row->p_price'  value ='$row->p_id'>".$row->p_name. "</option>";
                            endforeach;
                            ?>
                        </select>
                    </div>
                </div>
                <div class="col-sm-3 nopadding">
                    <div class="form-group">
                        <input type="text" class="form-control qty"   name="qty[]" value="" placeholder="Quantity">
                    </div>
                </div>
                <div class="col-sm-3 nopadding">
                    <div class="form-group">
                        <input type="text" class="form-control price"  name="price[]" value="" placeholder="Price">
                    </div>
                </div>

                <div class="col-sm-3 nopadding">
                    <div class="form-group">
                        <div class="input-group">
                                <input type="text" class="form-control total"  name="total[]" value="" placeholder="Total">
                            <div class="input-group-btn">
                                <button class="btn btn-success" type="button"  onclick="education_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
                </div>

            </div>
            <div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another product field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove the last product :)</small></div>
        </div>
        <button type="submit" class="btn btn-primary center-block">Checkout</button>
    <?php echo form_close();?>

This is my first jQuery and that used to generate a new row by + button

<script>

var room = 0;
function education_fields() {

    room++;
    var objTo = document.getElementById('education_fields');
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "form-group removeclass"+room);
    var rdiv = 'removeclass'+room;
    var medo='<div class="col-sm-3 nopadding"><div class="form-group"><select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]"><option></option><?php  foreach($order as $row){ ?><option data-price="<?php echo$row->p_price;?>"  value ="<?php echo $row->p_id; ?>"><?php echo $row->p_name; ?></option><?php }  ?></select></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control"  name="qty[]" value="" placeholder="Quantity"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control price"  name="price[]" value="" placeholder="Price"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <input class="form-control"  name="total[]" placeholder="Total"/><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';

    divtest.innerHTML = medo;
    objTo.appendChild(divtest);
    $('select').selectpicker();
}
function remove_education_fields(rid) {
    $('.removeclass'+rid).remove();
}
</script>

and this 2nd jQuery used to get product price from from drop-menu attributes and add that into price input.

<script>
function set_price( slc ) {
    var price = slc.find(':selected').attr('data-price');
    slc.parent().parent().next().next().find('.price').val(price);
}
$('#education_fields').on('change','select.selectpicker',function(){
    set_price( $(this) );
});
</script>

Answer 1

 var sample = $('#sample').html(); $('#sample').on('click', '.generate', function() { $('#sample').append(sample); }); $('#sample').on('change', 'select.selectpicker', function () { // keyword this is your current select element var select = $(this); // each group of inputs share a common .form element, so use that to // look up for closest parent .form, then down for input[name="price[]"] // and set the input's value select.closest('.form').find('[name^=price]').val( select.find('option:selected').data('price') // trigger input's keyup event (*) ).keyup(); }); // (*) note: input[type=text]'s onchange event triggers only after it loses focus; we'll use keyup event instead // create onkeyup event on the qty and price fields $('#sample').on('keyup', '[name^=qty], [name^=price]', function() { // get related form var form = $(this).closest('.form'); // get its related values var qty = parseInt(form.find('[name^=qty]').val(), 10), price = parseInt(form.find('[name^=price]').val(), 10); // ensure only numbers are given if (!isNaN(qty) && !isNaN(price)) { // set the total form.find('[name^=total]').val(qty * price); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sample"> <!-- group all related blocks into a div .form --> <!-- it makes it easier to reference in your JS --> <div class="form"> <div class="col-sm-3 nopadding"> <div class="form-group"> <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]"> <option data-price=200 value=1>tes1</option> <option data-price=218 value=2>tes2</option> <option data-price=80 value=3>tes3</option> </select> </div> </div> <div class="col-sm-3 nopadding"> <div class="form-group"> <input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity"> </div> </div> <div class="col-sm-3 nopadding"> <div class="form-group"> <input type="text" class="form-control price" name="price[]" value="" placeholder="Price"> </div> </div> <div class="col-sm-3 nopadding"> <div class="form-group"> <input type="text" class="form-control " name="total[]" value="" placeholder="total" readonly> </div> </div> </div> <button class="generate" type="button">Generate New Form</button> </div> 

Note, that I am lazy instead of doing [name="price[]"] , I simply did [name^=price] .

Edit changed onchange to keyup.