Заполнить текстовое поле на основе параметра выбора

Я пытаюсь получить значение «hargaJual», когда выбираю какую-то опцию. Но когда я вставлю новую строку в таблицу и выберу новую опцию, она изменит только первую строку «Харга» и оставит вторую строку пустой.

Вот результат:

<td>
<select class = "custom-select" id = "kodeSparepart" name = "kodeSparepart[]">
    <option value = ""> --Pilih Sparepart-- </option>";
    @foreach($sparepart as $s) {
            <option value = "{{ $s['kodeSparepart'] }}" data-price = "{{ $s->hargaJual }}"> {{ $s['namaSparepart'] }} </option>";
     }
    @endforeach
 </select>
 </td> 
 <td> 
    <input class = "form-control" type = "text" id = "hargaJualTransaksi" name = "hargaJualTransaksi[]" autocomplete = "off" readonly> 
 </td>

А вот мой джаваскрипт

    //for insert new row in table
 $(function(){
    $('#addMore').on('click', function() {
            var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
            data.find("input").val('');
    });

    $(document).on('click', '#remove', function() {
        var trIndex = $(this).closest("tr").index();
            if (trIndex>=1) {
            $(this).closest("tr").remove();
        } else {
            alert("Sorry!! Can't remove first row!");
        }
    });
});    
//fill hargaJualTransaksi field
$(function() {
    $('#kodeSparepart').on('change', function(){
        var price = $(this).children('option:selected').data('price');
        $('#hargaJualTransaksi').val(price);
    });
});