title: How to find table row after modal open close
body: <p>I have form which I have a table and in the table there are rows or I will add rows dynamically. </p>
  
  <pre><code>    &lt;table class="table table-bordered table-hover table-sm table-light sortable" &gt;
          &lt;thead class="thead-light"&gt;
              &lt;tr&gt;
                  &lt;th scope="col"&gt;{{ __('additional_information.title') }}&lt;/th&gt;
                  &lt;th scope="col"&gt;{{ __('additional_information.text') }}&lt;/th&gt;
                  &lt;th scope="col"&gt;{{ __('additional_information.file') }}&lt;/th&gt;
                  &lt;th scope="col"&gt;{{ __('additional_information.is_public') }}&lt;/th&gt;
                  &lt;th scope="col"&gt;{{ __('additional_information.is_showcase') }}&lt;/th&gt;
                  &lt;th scope="col"&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
     @foreach ($additionalInformations as $additionalInformation)
              &lt;tr&gt;
                  &lt;td data-value="{{ $additionalInformation-&gt;title }}"&gt;
                      &lt;input class="form-control" type="text" placeholder="{{ __('additional_information.title') }}" name="existing_additional_information_title[{{ $additionalInformation-&gt;id }}]" value='{{ $additionalInformation-&gt;title }}'&gt;
                  &lt;/td&gt;
                  &lt;td data-value="{{ $additionalInformation-&gt;text }}"&gt;
                      &lt;input class="form-control" type="text"  placeholder="{{ __('additional_information.text') }}" name="existing_additional_information_texts[{{ $additionalInformation-&gt;id }}]" value='{{ $additionalInformation-&gt;text }}'&gt;
                  &lt;/td&gt;
                  &lt;td  id = "photo"  class="d-inline-block text-truncate" data-value="{{ $additionalInformation-&gt;original_file_name }}" style="max-width: 300px;"&gt;
     @empty($additionalInformation-&gt;original_file_name)
     @else
                      &lt;a href="/file/image/{{ $additionalInformation-&gt;file }}"    data-placement="bottom" data-toggle="tooltip" data-html="true" title="&lt;img src='/file/image/{{ $additionalInformation-&gt;file }}'  width='180'  &gt;"&gt;{{ $additionalInformation-&gt;original_file_name }} &lt;/a&gt;
  @endif&lt;br&gt;
                  &lt;input type="file"  class= "imgcha" name="existing_additional_information_files[{{ $additionalInformation-&gt;id }}]"&gt;&lt;br&gt;
                  &lt;button type="button" class="btn btn-primary item-img file center-block"  id ="add_id" value="{{ $additionalInformation-&gt;id }}" name="file_photo"/&gt;Rajaa näyttökuva &lt;/button&gt;
  
                  &lt;/td&gt;
                  &lt;td nowrap data-value="{{ $additionalInformation-&gt;existing_additional_information_is_publics }}"&gt;
                      &lt;label class="plain"&gt;&lt;input type="checkbox" name="existing_additional_information_is_publics[{{ $additionalInformation-&gt;id }}]" value="1" {{ $additionalInformation-&gt;is_public == 1 ? 'checked' : '' }}&gt; {{ __('additional_information.is_public') }}&lt;/label&gt;
                  &lt;/td&gt;
                  &lt;td nowrap data-value="{{ $additionalInformation-&gt;existing_additional_information_is_showcase }}"&gt;
                      &lt;label class="plain"&gt;&lt;input type="checkbox" name="existing_additional_information_is_showcase[{{ $additionalInformation-&gt;id }}]" value="1" {{ $additionalInformation-&gt;is_showcase == 1 ? 'checked' : '' }}&gt; {{ __('additional_information.is_showcase') }}&lt;/label&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;button class="btn btn-secondary delete" value = {{ $additionalInformation-&gt;id }}&gt;&lt;i class="fas fa-trash"&gt;&lt;/i&gt; {{ __('global.delete') }}&lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
     @endforeach
          &lt;/tbody&gt;
      &lt;/table&gt;
  
  or
  
          var number= 0;
          $(".add-new").click(function(){
              // Math.floor(Math.random() * 100);
  
              var index = $("table tbody tr:last-child").index();
              var row =
                  '&lt;tr&gt;' +
                  '&lt;td&gt;&lt;input class="form-control" type="text" placeholder="{{ __("additional_information.title") }}" name="new_additional_information_title[]" value=""&gt;&lt;/td&gt;' +
                  '&lt;td&gt;&lt;input class="form-control" type="text" placeholder="{{ __("additional_information.text") }}" name="new_additional_information_texts[]" value=""&gt;&lt;/td&gt;' +
  
                  '&lt;td class="d-inline-block text-truncate"&gt;&lt;input  type="file" class= "imgcha" name="new_additional_information_files[]" &gt;&lt;br&gt;&lt;button type="button" class="btn btn-primary item-img file center-block" value="{{ $additionalInformation-&gt;id ?? null}}" id ="add_id" name="file_photo"&gt;Rajaa näyttökuva &lt;/button&gt; &lt;/td&gt;' +
                  ' &lt;input type="hidden"  name="new_additional_information_is_publics[' + number + ']" value="0" /&gt; ' +
                  '&lt;td nowrap&gt;&lt;label class="plain"&gt;&lt;input type="checkbox" name="new_additional_information_is_publics[' + number + ']"value="1" checked&gt; {{ __("additional_information.is_public") }}&lt;/label&gt;&lt;/td&gt;' +
                  '&lt;td nowrap&gt;&lt;label class="plain"&gt;&lt;input type="checkbox" class="chk" name="new_additional_information_is_showcase[]" value="1"&gt; {{ __("additional_information.is_showcase") }}&lt;/label&gt;&lt;/td&gt;' +
                  '&lt;td&gt;&lt;button class="btn btn-secondary delete" value="0"&gt;&lt;i class="fas fa-trash"&gt;&lt;/i&gt; {{ __("global.delete") }}&lt;/button&gt;&lt;/td&gt;' +
                  '&lt;/tr&gt;';
              $("table").append(row);
              $("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
              $('[data-toggle="tooltip"]').tooltip();
              number++;
          });
  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/9LQxM.png" rel="nofollow noreferrer">table</a></p>
  
  <p>After I add a row I click a button which opens modal. In the modal I crop image and send/save the cropped image via ajax. In return I get path to the picture. The I want to add a hidden input to the clicked row like</p>
  
  <pre><code>
              resize.croppie('result', {
  
                  type: 'canvas',
  
                  size: 'viewport'
  
              }).then(function (img) {
                      console.log( 'toka');
                  $.ajax({
  
                      url: "{{route('upload.image')}}",
  
                      type: "POST",
  
                      data: {"image":img, "add_id":add_id},
  
                      success: function (data) {
  
                          var el = '&lt;input type="hidden" name="crop_img" value=' 
                          + data.path + '&gt;&lt;/input&gt;';
                          $('#additionalInformationForm 
             input:hidden:last').replaceWith(el);
  
                          var test = $('#additionalInformationForm 
          tr:last').val();
                              console.log(data.id + data.path +test);
  
  
                      }
  
                  });
  
              });
  
          });
  modal
  &lt;div class="modal fade " id="cropImagePop" tabindex="-1" role="dialog" aria- 
      labelledby="exampleModalCenterTitle" aria-hidden="true"&gt;
      &lt;div class="modal-dialog modal-dialog-centered " role="document"  &gt;
          &lt;div class="modal-content" style="width:750px;"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h5 class="modal-title" id="exampleModalCenterTitle"&gt;Croppaa 
         näyttökuva&lt;/h5&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria- 
         label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body align-items-center text-center" &gt;
                  &lt;div id="upload-demo"&gt;&lt;/div&gt;
                  &lt;button type = "button" class="btn btn-primary btn-block 
              `enter code here`upload-image" style="margin-top:2%"&gt;Rajaa 
               kuva&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-secondary" data- 
                  dismiss="modal"&gt;Close&lt;/button&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  </code></pre>
  
  <p>And the question is how can i find the right row where to add the input? And how to update certain row everytime time i crop the photo.
  Hopefully you can understand the question. Thanks!</p>
  
  <p><a href="https://i.stack.imgur.com/cDuZn.png" rel="nofollow noreferrer">modal</a></p>
  
  <pre><code>
    public function uploadImage(Request $request)
  
      {
  
          if($request-&gt;add_id === null){
              $image = $request-&gt;image;
  
              list($type, $image) = explode(';', $image);
  
              list(, $image)      = explode(',', $image);
  
              $image = base64_decode($image);
  
              $image_name= time().'.png';
  
  
              $path = storage_path() . '/app/additional_information_files/' . $image_name;
  
  
              $statement = DB::select("show table status like 'additional_informations'");
  
  
  
              file_put_contents($path, $image);
              $path_img = '/app/additional_information_files/' . $image_name;
             // $filename = explode("/", $path);
              //$path_img = 'file/image/' . $filename[8];
              return response()-&gt;json(['status'=&gt;true, 'path' =&gt; $path, 'id'=&gt;  $statement[0]-&gt;Auto_increment]);
          }
  
          $addinfo = \App\AdditionalInformation::find($request-&gt;add_id);
          $image = $request-&gt;image;
  
  
          if($addinfo-&gt;showcase_picture)
          {
              Storage::delete($addinfo-&gt;showcase_picture);
          }
          list($type, $image) = explode(';', $image);
  
          list(, $image)      = explode(',', $image);
  
          $image = base64_decode($image);
  
          $image_name= time().'.png';
  
  
          $path = storage_path() . '/app/additional_information_files/' . $image_name;
  
  
          $addinfo-&gt;showcase_picture = $path;
          $addinfo-&gt;save();
  
          file_put_contents($path, $image);
  
          return response()-&gt;json(['status'=&gt;true, 'path' =&gt; $path]);
  
      }
  
      public function createFromRequest(Request $request, AdditionalInformationContainer $container)
      {
          // Get texts, files and isPublics from the request
          $titles = $request-&gt;get('new_additional_information_title') ?? [];
          $texts = $request-&gt;get('new_additional_information_texts') ?? [];
          $files = $request-&gt;file('new_additional_information_files') ?? [];
          $isPublics = $request-&gt;get('new_additional_information_is_publics') ?? [];
          $isShowcases = $request-&gt;get('new_additional_information_is_showcase') ?? [];
          $isCropImages = $request-&gt;get('crop_img') ?? [];
          // Validate files
          $this-&gt;validateFiles($request);
  
  
          // Loop through all texts and get the matching files and isPublics
          // based on the array index
          foreach ($texts as $index =&gt; $text) {
              $title = array_key_exists($index, $titles) ? $titles[$index] : null;
              $text = array_key_exists($index, $texts) ? $texts[$index] : null;
              $file = array_key_exists($index, $files) ? $files[$index] : null;
              $isPublic = array_key_exists($index, $isPublics) ? $isPublics[$index] : false;
              $isShowcase = array_key_exists($index, $isShowcases) ? $isShowcases[$index] : false;
              $isCropImage = array_key_exists($index, $isCropImages) ? $isCropImages[$index] : false;
  
              // If the fields are empty, skip
              if ($text === null &amp;&amp; $file === null) {
                  continue;
              }
  
              // Create the additional information and attach it to the container
              $additionalInformation = $this-&gt;create($file, $title, $text, $isPublic, $isShowcase, $isCropImage);
  
              if ($additionalInformation) {
                  $container-&gt;additionalInformations()-&gt;attach($additionalInformation);
              }
          }
  
          return $container;
      }
  
      public function create(UploadedFile $file = null, string $title = null, string $text = null, bool $isPublic, bool $isShowcase, string $isCropImage = null)
      {
          // Skip if file and text are empty
          if (!$file &amp;&amp; strlen(trim($text)) === 0) {
              return null;
          }
  
          // Create the additional information with basic info
          $additionalInformation = new AdditionalInformation();
          $additionalInformation-&gt;title = $title;
          $additionalInformation-&gt;text = $text;
          $additionalInformation-&gt;is_public = $isPublic;
          $additionalInformation-&gt;is_showcase = $isShowcase;
          $additionalInformation-&gt;showcase_picture = $isCropImage;
          // Attach the file if specified
          if ($file) {
              $path = $file-&gt;store('additional_information_files');
              $additionalInformation-&gt;file = $path;
              $additionalInformation-&gt;filesize = $file-&gt;getClientSize();
              $additionalInformation-&gt;original_file_name = $file-&gt;getClientOriginalName();
          }
          // Save
          $additionalInformation-&gt;save();
          return $additionalInformation;
      }
  ~~~
  </code></pre>