Jquery – Create dynamically IDs in html form when add a new element and pass then .on change function

I have this code and it works, i can add a new lines and also delete them.

The problem is when i select and option from the select input it changes the two inputs with the correct information.

When i add new line or several lines. I select an option from the select input (any select input created) changes all the inputs with the same information.

I figured that the problem is the IDs for the three elements, so the new elemenst they have the same IDs. I trid with a class but the same problem.

Here is the form:

<form method="post" action="/add">
                            <input class="form-control" name="market_id" value="<?= $market['market_id']; ?>" hidden>
                            <div class="card mb-4">
                                <div class="row card-body" id="inputFormRow">
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label">Item</label>
                                        <select class="form-select mySelect" name="market_items[]" id="mySelect" required>
                                        <option></option>
                                        <?php foreach($marketItems as $item): ?>
                                        <option value="<?= $item['item_id']; ?>" data-itemname="<?= $item['item_description']; ?>" data-itemprice="<?= $item['regular_price']; ?>"><?= $item['item_description']; ?></option>
                                        <?php endforeach; ?>
                                        </select>
                                    </div>
                                    <input type="hidden" class="form-control myItemName" id="myItemName" name="itemName[]">
                                    <input type="hidden" class="form-control myItemPrice" id="myItemPrice" name="itemPrice[]">
                                    <div class="col-md-2 mb-2">
                                        <label class="form-label">Quantity</label>
                                        <input type="number" class="form-control" name="market_items_qty[]" required>
                                    </div>
                                    <div class="col-md-1 mb-2">
                                        <label class="form-label">Box(s)::EA</label>
                                        <select class="form-select" name="market_items_unit[]" required>
                                            <option></option>
                                            <option value="Box(s)">Box(s)</option>
                                            <option value="Each">Each</option>
                                        </select>
                                    </div>
                                    <div class="col-md-1 mb-2">
                                        <label class="form-label">Del::Row</label>
                                        <button id="removeRow" type="button" class="form-control btn btn-outline-danger">Remove</button>
                                    </div>

                                </div>
                                <div id="newRow"></div>
                            </div>
                            <div class="d-grid gap-2" hidden>
                                <button id="addRow" type="button" class="btn btn-outline-info mb-3">Add Row</button>
                            </div>
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary">ADD</button>
                            </div>
                        </form>

Here is the js/jquery code:

// add row
$("#addRow").click(function () {
    var html = '';

    html += '<div class="row card-body" id="inputFormRow">';

    html += '<div class="col-md-6 mb-2">';
    html += '<label class="form-label">Item</label>';
    html += '<select class="form-select mySelect" name="market_items[]" id="mySelect" required>';
    html += '<option></option>';
    html += '<?php foreach($marketItems as $item): ?>';
    html += '<option value="<?= $item['item_id']; ?>" data-itemname="<?= $item['item_description']; ?>" data-itemprice="<?= $item['regular_price']; ?>"><?= $item['item_description']; ?></option>';
    html += '<?php endforeach; ?>';
    html += '</select>';
    html += '</div>';

    html += '<input type="hidden" class="myItemName" id="myItemName+=ticks;" name="itemName[]">';
    html += '<input type="hidden" class="myItemPrice" id="myItemPrice+=ticks;" name="itemPrice[]">';

    html += '<div class="col-md-2 mb-2">';
    html += '<label class="form-label">Quantity</label>';
    html += '<input type="number" class="form-control" name="market_items_qty[]" required>';
    html += '</div>';

    html += '<div class="col-md-2 mb-2">';
    html += '<label class="form-label">Box(s)::EA</label>';
    html += '<select class="form-select" name="market_items_unit[]" required>';
    html += '<option></option>';
    html += '<option value="Box(s)">Box(s)</option>';
    html += '<option value="Each">Each</option>';
    html += '</select>';
    html += '</div>';

    html += '<div class="col-md-2 mb-2">';
    html += '<label class="form-label">Del::Row</label>'
    html += '<button id="removeRow" type="button" class="form-control btn btn-outline-danger">Remove</button>';
    html += '</div>';

    html += '</div>';

    $('#newRow').append(html);
});

// remove row
$(document).on('click', '#removeRow', function () {
    $(this).closest('#inputFormRow').remove();
});

$(document.body).on('change', '#mySelect', function() {
    // Get the selected option's data attribute value
    var itemName = $(this).find('option:selected').data('itemname');
    var itemPrice = $(this).find('option:selected').data('itemprice');
                                
    // Update the hidden input's value
    $('#myItemName').val(itemName);
    $('#myItemPrice').val(itemPrice);
});

I have no idea how to generate the IDs dynamically and also how to pass the IDs on change function. Any help is welcome!