ADD or Remove Dynamic dependent select box Laravel

This is a simple Dynamic form so that I can select a country from the first select box it will load all states of that country in each row. It was working fine for the first row but when I click Add More and select another country for the next row it was loading the last selected row states in all rows.

Create.blade.php

        <th scope="col" width="250">Country</th>
        <th scope="col" width="250">State</th>
    </tr>
    <tr>
        
        <td>
            <select name="country[0]" class="form-control js" id="state" required="required">
                <option value="">-- Select Project --</option>
                @foreach ($countries as $key => $value)
                <option value="{{ $key }}">{{ $value }}</option>
                @endforeach
            </select>
        </td>
        <td>
            <select name="state[0]" class="form-control js">
                <option>-- Sub Head--</option>
            </select>
        </td>
        <td><button type="button" name="add" id="add12" class="btn btn-success">Add More</button></td>
    </tr>
</table>

<script type="text/javascript">
    $(document).ready(function () {

        $(document.body).on("change.select2", "select[name^='country']", function () {
            var id_country = $(this).val();
            var token = $("input[name='_token']").val();
            $.ajax({
                url: "<?php echo route('select-ajax') ?>",
                method: 'GET',
                dataType: 'json',
                data: { id_country: id_country, _token: token },
                success: function (data) {
                    $("select[name^='state'").html('');
                    $("select[name^='state'").html(data.options);
                }
            });
        });
    });
</script>

<script>

    let initializeSelect2 = function () {
        $('.js').select2();
    }
    var i = 0;
    $("#add12").click(function () {
        ++i;
        $("#dynamicTable12").append('<tr> <td> <select  class="form-control js" name="country[' + i + ']" required="required"><option value="">--select--</option>@foreach ($countries as $key => $value)<option value="{{ $key }}">{{ $value }}</option>@endforeach</select></td> <td> <select name="state[' + i + ']" class="form-control js"><option>-- Sub Head--</option></select></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
        initializeSelect2()
    });
    $(document).on('click', '.remove-tr', function () {
        $(this).parents('tr').remove();
    });

    $(document).ready(function () {
        initializeSelect2()
    });
</script>

ajax-select.blade.php

<option value="0">--- Select Sub-Head ---</option>
@if(!empty($states))
  @foreach($states as $key => $value)
    <option value="{{ $key }}">{{ $value }}</option>
  @endforeach
@endif

Controller

public function create()
    {
        $countries = DB::table('projects')->pluck("name","id")->all();
        return view('create',compact('countries'));
    }

 public function selectAjax(Request $request) { 
        
        if($request->ajax()){ $states = DB::table('project_heads')->where('project_id',$request->id_country)->pluck("head","id")->all(); 
        $data = view('ajax-select',compact('states'))->render(); 
        return response()->json(['options'=>$data]); } } 
    
    }