Я не могу щелкнуть строку данных, чтобы отправить данные в текстовое поле в Laravel 5.4

У меня есть веб-приложение в Laravel 5.4. В некоторых модулях у меня есть основная форма, из которой таблицы данных вызываются в модальном диалоговом окне (например: если я нажимаю на кнопку поиска, появляется модальное окно с таблицами данных в нем).
Я пытаюсь добиться того, чтобы при щелчке по данным в таблицах данных он закрывал модальное окно, получал информацию, по которой щелкнули, и отображал ее в указанном поле формы, основной формы.
Но после того, как я поместил все необходимые сценарии, ничего не происходит, когда я нажимаю на данные в datatable.

1. а. HTML таблица

                 <section class="panel">
   <div class="table-responsive">
   <table width="100%" id="pere-table" class="table" >
   <thead>
   <tr>
   <th>NNID</th>
   <th>Nom</th>
   <th>Post-Nom</th>
   <th>Prenom</th>
   </tr>
   </thead>
   <tbody>
   <tr >
   <td class="NNID"></td>
   <td class="nom"></td>
   <td class="postnom"></td>
   <td class="prenom"></td>
   </tr>
   </tbody>
   </table>
   </div>
   </section>
   <a href="#ajout_pere" data-toggle="modal" class="btn btn-success btn-lg"><small><span class="glyphicon glyphicon-plus"></span> Ajouter</small></a>
   

   Поле ввода для получения данных имеет pere_nouv как его идентификатор

2. Контроллер извлечения данных

    public function recherchePere ()
   {
   $pere = Pere::join('t_individus','t_adultes.nnid', '=',
   't_individus.nnid')
   ->select(['t_individus.nom', 't_individus.postnom',
   't_individus.prenom', 't_individus.nnid'])
   ->where('t_individus.sexe','=','0');
   
   return Datatables::eloquent($pere)->make(true);
   
   }
   

3. Аякс для данных

                  @push('scripts')
   
   <script type="text/javascript">
   $(function() {
   $('#pere-table').DataTable({
   processing: false,
   serverSide: true,
   ordering: false,
   ajax:'http://127.0.0.1:8000/nouveau_ne/data_peres',
   columns :[
   {data : 'nnid', name:'t_individus.nnid'},
   {data : 'nom', name:'t_individus.nom'},
   {data : 'postnom', name:'t_individus.postnom'},
   {data : 'prenom', name:'t_individus.prenom'},
   ]
   });
   });
   </script>
   @endpush
   

4. Маршрут

     Route::get('/nouveau_ne/data_peres', ['as' => 'nouveau_ne','uses' =>
   'AdulteController@recherchePere']);
   Route::get('/nouveau_ne/pere', [ 'uses' => 'AdulteController@index']);
   

5. Скрипт Jquery для щелчка по строке для подачи текстового поля

     <script type="text/javascript">
   var vpWidth = $(window).width();
   var vpHeight = $(window).height();
   
   var textClickedOn;
   var pereNouv = $("#pere_nouv");
   var nnid = $(".NNID");
   nnid.click(function(){
   //Get text clicked on
   textClickedOn = $(this).text();
   //alert(textClickedOn);
   pereNouv.val(textClickedOn);
   });
   </script>
   

ВОПРОС: Что я делаю не так? Ваша помощь и советы будут высоко оценены