jquery put text to

<input id="operator_name" name="operator_name" value=" ">
<div class="dropdown show " id="operator_list"></div>

<script>
  $(document).on('click', 'li', function(){
         $('#operator_name').val($(this).text());
         $('#operator_list').fadeOut();
  });
</script>

this is my blade

public function fetch(Request $request) {
    if ($request->get('query')) {
        $query = $request->get('query');
        $data = DB::table('operators')
            ->where('firstname', 'like', '%' . $query . '%')
            ->orWhere('middlename', 'like', '%' . $query . '%')
            ->orWhere('surname', 'like', '%' . $query . '%')
            ->get();
        $output = '<ul class="dropdown-menu" style="display:block;">';

        foreach ($data as $row) {
            $output .= '<li class="dropdown-item" value=' . $row->id . '>'. $row->surname.', '.$row->firstname.'</li>';
        }

        $output .= '</ul>';

        echo $output;
    }
}

this is in my controller.

how do i get li value row id to input value tag while at the same time get li text value to input tag?

via Chebli Mohamed