Php not working on add more row (Form repeater)

Question

I am using form repeater to create an invoice. Invoices have multiple products which come from the database with the price. When I choose a product its price automatic appears to fee box and there are other input boxes like discount and percentage, which have values 0 0 by default. The first row works very fine. but when I click on add more button to generate next row to add another product.

In next row, I can choose the product from a drop-down. but its fee did not appear and other input box values like discount and percentage also disappear (They did not show up any default value.)

Here is my HTML code.

<div class="row">
    <div class="col-xs-3">
        <label for="single" class="control-label">Select Invoice Type</label>
    </div>
    <div class="col-xs-2">Fee</div>
    <div class="col-xs-1">Quantity</div>
    <div class="col-xs-1">Discount</div>
    <div class="col-xs-2">Total</div>
    <div class="col-xs-1">Doctor %</div>
</div>
<div class="mt-repeater">
    <div data-repeater-list="group-b">
        <div data-repeater-item class="row">
            <div class="col-xs-3">
                <div class="form-group">
                    <select id="invoice" class="form-control" name="invoice">
                        <option></option>
                        <?php
                            $select = mysqli_query(connection(), "select * from treatement");
                            while($r = mysqli_fetch_array($select)) {
                                echo "<option value='$r[0]'>$r[name]</option>";
                            }
                         ?>
                    </select>
                </div>
            </div>
            <div class="col-xs-2">
                <div class="form-group">
                    <input type="text" value="" class="form-control"  placeholder="Fee" name="fees" id="fees">
                </div>
            </div>
            <div class="col-xs-1">
                <div class="form-group">
                    <input type="text"  class="form-control" value="1" name="quantity" >
                </div>
            </div>
            <div class="col-xs-1">
                <div class="form-group">
                    <input type="text" value="0" class="form-control" placeholder="Discount" name="discount">
                </div>
            </div>
            <div class="col-xs-2">
                <div class="form-group">
                    <input type="text" value="0" class="form-control" placeholder="Total" readonly name="total">
                </div>
            </div>
            <div class="col-xs-2">
                <div class="form-group">
                    <input type="text" value="0" class="form-control" placeholder="%" name="percentage">
                </div>
            </div>
            <div class="col-md-1">
                <a href="javascript:;" data-repeater-delete class="btn btn-danger">
                <i class="fa fa-close"></i>
                </a>
            </div>
        </div>
    </div>
    <a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add">
    <i class="fa fa-plus"></i> Add More
    </a>
    <br>
    <br>
</div>

And I use js function to compare fee of each product. This helps me display fee in a box.

$(document).ready(function() {
    $("#invoice").change(function() {
        var value = $(this).val();
        $.get("get_fees.php", {
            id: value
        }, function(data) {
            $("#fees").val(data);
        })
    })
})

Answer 1

please.. dont use id like that. id must be unique, you should use class instead ID (see barmar comment)

<p id="test"></p>
<p id="test"></p>
<p id="test"></p>

should be

<p id="test1" class="test"></p>
<p id="test2" class="test"></p>
<p id="test3" class="test"></p>

do you that, i dont use same id, because id must be unique.

• 1 id must used by 1 element.
• 1 class can be used by many element

but, you can still hack this with. $('select[id="invoice"]')

and seems you create new dom , you can change this line

$("#invoice").change(function() {

become

$("body").on('change', 'select[id="invoice"]', function() {

UPDATE: why you always change your first selector / the first id=fees. because you are using $('#fees').val()

you must specify that, with: get the parent (i make it with closest()), then find the specific id="fees" which you want to change

because you dont have anyspecific class that identify your parent repeater, i choose to add rowsdata class

change <div data-repeater-item class="row"> with <div data-repeater-item class="row rowsdata">

and your script will looks like this

$("body").on('change', 'select[id="invoice"]', function() {
    var select = $(this);
    $.get("get_fees.php", {
        id: select.val()
    }, function(data) {
        select.closest('.rowsdata').find('input[id="fees"]').val(data); //if you still give id="fees" and dont have any class use this
        //select.closest('.rowsdata').find('.fees').val(data); if you already give class="fees", use this
    });
});