How to iterate ajax success to every row in laravel table?

I can only update the first table of my row and others won't do the dynamic input.

This is my RegisterController@fetchtwo

public function fetchtwo(Request $request)
{
    if ($request->get('query')) {
        $query = $request->get('query');
        $data = DB::table('franchises')
            ->where('case_number', 'like', '%' . $query . '%')
            ->get();
        $output = '<ul class="dropdown-menu" style="display:block;">';
        foreach ($data as $row) {
            $output .= '<li class="dropdown-item" value=' . $row->id . '>' . $row->case_number . '</li>';
        }
        $output .= '</ul>';
        echo $output;
    }
}

Inside of my register-unit.blade.php This is inside my bootstrap modal where I can call and update each row in my table.

@foreach ($unit as $user)
     <div class="form-group col-4">
        <label>Case number</label>
        <input id="case_number" type="text" class="form-control" name="case_number" value="">

        <input type="hidden" id="case_number_hidden" value="" name="case_number_hidden">
        <div class="dropdown show " id="case_number_list"></div>
    </div>
    
@endforeach

Script inside my register-unit.blade.php. This code only execute in every first row of the table i paginate

<script type="text/javascript">
    $(document).ready(function(){
        $('#case_number').keyup(function(){
            var query = $(this).val();
            if (query != ''){
                var _token = $('input[name="_token"]').val();
                $.ajax({
                    url:"",
                    method:"POST",
                    data:{query:query, _token:_token},
                    success:function(data){
                        $('#case_number_list').fadeIn();
                        $('#case_number_list').html(data);
                    }
                })
            }
        });
    });

    $(document).on('click', 'li', function(){
        $('#case_number').val($(this).text());
        let y = $(this).val();
        $('#case_number_hidden').attr('value', y);
        $('#case_number_list').fadeOut();
    });
</script>

How can I iterate this to every row? or make all input tag dynamic where id equals case_number?

via Chebli Mohamed