JQuery Adding new Row in Table based on Selection

When the user selects a value from drop down which is the product a row is dynamically added which work perfectly fine in my laravel project.

Then adding a new product to the row which also adds a row to the Table but the previous product record is also replaced by this product value.

    <div class="card-body">
        <div class="row">
            <div class="col-12 col-md-12 col-sm-12 form-group table-responsive m-b-30">
                <table class="table table-bordered" id="trainingsTable">
                <thead>
                    <tr>
                        <th>Ekle</th>
                        <th>Eğitim</th>
                        <th>Satış</th>
                        <th>Liste</th>
                        <th>İndirimli</th>
                        <th>Sınav</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><button type="button" name="add" id="add" class="btn btn-success"><i class="fa fa-plus-circle"></i></button></td>
                        <td>
                            <select class="form-control selectTraining" name="training_id[]" id="training_id[]">
                                <option>Seçiniz</option>
                                @foreach($trainings as $training)
                                <option data-price="{{ $training->price }}" data-listprice="{{ $training->list_price }}" data-examprice="{{ $training->exam_price }}" value="{{ $training->id }}">{{ $training->name }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>{!! Form::text('sale_amount[]', old('sale_amount'), ['id' => 'sale_amount[]', 'class' => 'form-control sale_amount']) !!}</td>
                        <td><input type="text" name="list_price" id="list_price" value="" class="form-control list_price" disabled /></td>
                        <td><input type="text" name="price" id="price" value="" class="form-control price" disabled /></td>
                        <td><input type="text" name="exam_price" id="exam_price" value="" class="form-control exam_price" disabled /></td>
                    </tr>
                </tbody>
                </table> 
            </div>
        </div>
    </div>

// Script Start
    $('.selectTraining').on('change', function() {
        $('.list_price').val($(this).find(':selected').data('listprice'));
        $('.price').val($(this).find(':selected').data('price'));
        $('.exam_price').val($(this).find(':selected').data('examprice'));
    });
    var i = 0;
    $("#add").click(function(){
        ++i;
        $("#trainingsTable").append('<tr>' +
            '<td><button type="button" class="btn btn-danger remove-tr"><i class="fa fa-minus-circle"></i></button></td>' +
            '<td>' +
                '<select class="form-control selectTraining" name="training_id[]" id="training_id[]">' +
                    '<option>Seçiniz</option>' +
                    '@foreach($trainings as $training)' +
                    '<option data-price="{{ $training->price }}" data-listprice="{{ $training->list_price }}" data-examprice="{{ $training->exam_price }}" value="{{ $training->id }}" >{{ $training->name }}</option>' +
                    '@endforeach' +
                '</select>' +
            '</td>' +
            '<td>{!! Form::text('sale_amount[]', old('sale_amount'), ['id' => 'sale_amount[]', 'class' => 'form-control sale_amount']) !!}</td>' +
            '<td><input type="text" name="list_price" id="list_price" value="" class="form-control list_price" disabled /></td>' +
            '<td><input type="text" name="price" id="price" value="" class="form-control price" disabled /></td>' +
            '<td><input type="text" name="exam_price" id="exam_price" value="" class="form-control exam_price" disabled /></td></tr>');
            $('.selectTraining').on('change', function() {
                $('.list_price').val($(this).find(':selected').data('listprice'));
                $('.price').val($(this).find(':selected').data('price'));
                $('.exam_price').val($(this).find(':selected').data('examprice'));
            });
    });
    $(document).on('click', '.remove-tr', function(){  
            $(this).parents('tr').remove();
    });
// Script End

screenshot

A product can be selected in the sold row and the offer Price, Discounted Price and Exam Fee are automatically filled in the relevant fields. But when two or more lines are selected, all fields are filled with the latest contact information, crushing other selections.

Thanks for helps...