How to dynamic select option with cloned select option?

i want to do some like:

when i click the select > option from 1st select option, then the 2nd select option will filled with the data from database (already done), but, i need to create a select option again like the before (another dynamic select option).

here my code (look at javascript code to see what i've done)

then, i need to un-disable the 2nd select option if the 1st select option is changed

preview : https://ibb.co/zxW1WZg

html:

                <tbody>
                    <tr style="" id="original">
                        <td width="50">
                            <input type="number" name="sortOrder[]" value="1" id="sortOrder" min="1" max="10" class="border-0 text-center shadow-none" style="background-color: transparent;" readonly="">
                        </td>
                        <td>
                            <div class="form-group row mt-4">
                                <label for="payment_method" class="col-3 control-label text-right">Payment Method</label>
                                <div class="col-8">
                                    <select name="payment_method[]" id="payment_method" class="form-control payment_method">
                                        <option value="" selected disabled>Pilih Payment Method</option>
                                        @foreach($payment_methods as $key => $row)
                                            <option value="{{ $row->method }}">{{ $row->method }}</option>
                                        @endforeach
                                    </select>
                                    <div class="form-text text-muted">
                                        Insert Payment Method
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group row ">
                                <label for="payment_merchant" class="col-3 control-label text-right">Payment Merchant</label>
                                <div class="col-8">                                    
                                    <select name="payment_merchant[]" id="payment_merchant" class="form-control payment_merchant" disabled>
                                        <option value="" selected disabled>Pilih Payment Merchant</option>
                                    </select>
                                    <div class="form-text text-muted">
                                        Insert Payment Merchant
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="text-center">
                            <div class="align-left">
                                <a id="delete" class="btn btn-danger"><span class="fa fa-trash" style="margin-top: 6px; color: white;"></span></a>
                            </div>
                        </td>
                    </tr>
                </tbody>

javascript

<script>
    $(document).ready(function(){
        var count = 1; // row index
        $('#addMorePayment').on('click', function(){
            console.log("count = " + count);
            if(count <= 10){ // image upload limit = 10
                // if (count == 1) {
                //     tableShow();
                // }
                var lastRow = $("#payment-table tr").last().find("#sortOrder").val();
                console.log("lastRow = "+lastRow);
                if (lastRow == null) {
                    lastRow = 0;
                }
                lastRow++;
                var table = $("#payment-table");
                var original = $("#payment-table tr:eq(1)");
                var clone = original.clone(true).appendTo("#payment-table");
                newRow = clone.attr('class', 'clone');
                newRow.find("input").val("");
                newRow.find("#sortOrder").val(lastRow);
                count++;
            }
        });
        
        //delete x
        $('#delete').on('click', function(){
            if(count > 1){
                $(this).closest("tr").remove();
                count--;
                console.log("count = "+count);
            }
        });
    });

// here what i've done, i think its wrong code (Below)

    $(document).ready(function(){
        $(".payment_method").each(function() {
            var count = 1; // row index
                $(this).change(function(){
                    var select = $(this).attr("id");
                    var value = $(this).val();
                    var _token = $('input[name="_token"]').val();
                    var $this = $(this);
                    
                    $.ajax({
                        url:"{{ route('branches.get_payment_method_merchant') }}",
                        method:"POST",
                        data:{select:select, value:value, _token:_token},

                        success:function(result){
                            $("select:eq("+count+")").html(result);
                            $("select:eq("+count+")").removeAttr('disabled');
                        }
                    });

                });
        });
    });
</script>