title: Load DataTable data to a Edit Modal
body: <p>I am trying to create an edit function for my data table. The data table is created using Yajra Data tables. Everything working fine unless when I try to load existing data into the edit modal it fails. No error is showing but the modal does not launch. I have only included a little portion of my code here for easy reference.</p>
  
  <p>Modal:</p>
  
  <pre><code>&lt;!-- Update Status Model Box --&gt;
      &lt;div id="updateStatusModal" class="modal fade" role="dialog"&gt;
          &lt;div class="modal-dialog modal-lg"&gt;
              &lt;div class="modal-content bg-default"&gt;                
                  &lt;div class="modal-body"&gt;
                      &lt;form class="form-horizontal" id="updateStatus"&gt;
                          @csrf
                          @method('PUT')
                          &lt;div class="row"&gt;
                              &lt;div class="col"&gt;
                                  &lt;div class="form-group text-center"&gt;
                                      &lt;h6 class="font-weight-bold"&gt;Stage 1&lt;/h6&gt;
                                      &lt;label for="stage_1" class="switch"&gt;
                                          &lt;input type="checkbox" class="form-control" id="stage_1"&gt;
                                          &lt;div class="slider round"&gt;&lt;/div&gt;
                                      &lt;/label&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;                            
  
                          &lt;/div&gt;
  
                          &lt;div class="row"&gt;                            
  
                              &lt;div class="col"&gt;
  
                                  &lt;div class="form-group"&gt;
                                      &lt;div class="col-md"&gt;
                                          &lt;label for="firstname"&gt;Coding&lt;/label&gt;
                                          &lt;input type="text" class="form-control" id="first_name" value="" placeholder="Enter Completed Page Count"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer justify-content-between"&gt;
                      &lt;button type="button" name="update_btn" id="update_btn" class="btn btn-outline-warning"&gt;Update&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  </code></pre>
  
  <p>jquery funtion:</p>
  
  <pre><code>// Edit action
      $(document).on('click', '.updateStatus', function(){
  
  
          $tr = $(this).closest('tr');
  
          var data = $tr.clidren("td").map(function(){
              return $(this).text();
          }).get();
  
          console.log(data);
  
          $('#id').val(data[0]);
          $('#job_id').val(data[2]);
          $('#stage_1').val(data[3]);
          $('#conversion').val(data[4]);     
  
          $('#updateStatusModal').modal('show');
  
      });
  </code></pre>
  
  <p>I tried this method I found but this is not working. Can anyone provide me any pointers here?</p>