title: How to find the closest table row using jQuery?
body: <p>I have problem getting the value of the replace new table row, I will let you show the codes for the replacing new table row.</p>
  
  <p>The is the Table B, Where this code use for replacing new table row to the Table A</p>
  
  <pre><code>    $('#edit_chainingBuild').on('click','tr.clickable-row',function(e){
  
        $('table#edit_chainingBuild tr').removeClass('selected');
        $(this).addClass('selected');
  
        var find_each_id_will_update = $(this).find('.data-attribute-chain-id').attr('data-attribute-chain-id');
        $('.id_to_update_chain').val(find_each_id_will_update);
  
        var find_each_id_condiments = $(this).find('.data-attribute-chain-id').attr('data-attribute-condiments-section-id');
  
        $.ajax({
          url:'/get_each_id_section_condiments',
          type:'get',
          data:{find_each_id_condiments:find_each_id_condiments},
          success:function(response){
  
            var get_each_section = response[0].condiments_table;
  
  
            $.each(get_each_section, function (index, el) {
  
              var stringify = jQuery.parseJSON(JSON.stringify(el));
  
              var cat_condi_screen_name = stringify['cat_condi_screen_name'];
              var cat_condi_price = stringify['cat_condi_price'];
              var cat_condi_image = stringify['cat_condi_image'];
              var condiment_section_name = stringify['condiment_section_name'];
              var image = '&lt;img src=/storage/' + cat_condi_image + ' class="responsive-img" style="width:100px;"&gt;';
  
              // $('#edit_chainingBuild').append("&lt;tr class='clickable-row'&gt;&lt;td&gt;" + Qty + "&lt;/td&gt;&lt;td class='clickable-row-condiments'&gt;" + Condiments + "&lt;/td&gt;&lt;td&gt;" + Price + "&lt;/td&gt;&lt;td style='display:none;' data-attribute-chain-id="+menu_builder_details_id +" class='data-attribute-chain-id'&gt;"+menu_builder_details_id+"&lt;/td&gt;&lt;/tr&gt;");
  
              $('table#edit_table_chaining_condiments').append("&lt;tr class='edit_condimentsClicked' style='font-size:14px; border:none;'&gt;&lt;td&gt;"+condiment_section_name  +"&lt;/td&gt;&lt;td class='edit_condimentsScreenNameClicked'&gt;" + cat_condi_screen_name + "&lt;/td&gt;&lt;td class='edit_condimentsScreenPriced'&gt;" + cat_condi_price + "&lt;/td&gt;&lt;td&gt;"+image+"&lt;/td&gt;&lt;/tr&gt;");
  
            });
  
            $("table#edit_table_chaining_condiments tr").click(function(e){
  
  
               var tableBhtml =  $(this).closest('tr').html();
  
                var condiments_name = $(this).closest("tr").find(".edit_condimentsScreenNameClicked").text();
                var condimentsScreenPriced = $(this).closest("tr").find(".edit_condimentsScreenPriced").text();
                // var input = '&lt;input type="number"  id="qty" name="qty" class="form-control changeQuantity" value="1" min="1"&gt;';
                var id_to_edit_build = $('.id_to_update_chain').val();
  
                $("#edit_chainingBuild tr.selected").html('');
                var id_to_edit_builders = $('.id_to_update_chain').val();
  
                $("#edit_chainingBuild tr.selected").replaceWith("&lt;tr data-attribute-chain-id=" + id_to_edit_build + " class='clickable-row'&gt;&lt;td class='new_condiments_name'&gt;"+condiments_name+"&lt;/td&gt;&lt;td&gt;"+condimentsScreenPriced+"&lt;/td&gt;&lt;td style='display:none;' data-attribute-chain-id="+id_to_edit_builders +" class='data-attribute-chain-id'&gt;"+id_to_edit_builders+"&lt;/td&gt;&lt;/tr&gt;");
  
                $('#EditcondimentsBuilderModal').modal('hide');
  
            });
  
  
          },
          error:function(response){
            console.log(response);
          }
        });
  
        $('#EditcondimentsBuilderModal').modal('show'); 
  
  
  });
  </code></pre>
  
  <p>Looking forward if the table row already replace, I want to get the value of the class of <code>new_condiments_name</code>. So I create a variable to find the class of new_condiments_name. It look like this.</p>
  
  <pre><code>var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();
  </code></pre>
  
  <p>So now when I try alert the variable <code>new_condiments_name</code> using the click function it shows null only.</p>
  
  <pre><code>$('.edit_build_success_insert').click(function(){
        var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();
        alert(new_condiments_name);
  });
  </code></pre>
  
  <p>My Html Table:</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
  
              &lt;div class="container"&gt;
                  &lt;div class="header" style="text-align: center;"&gt;
                      &lt;br&gt;
                      &lt;h3 style="color:#007BFF;"&gt;Build Your Chain Button&lt;/h3&gt; 
                      &lt;label&gt;This button will be served as customers menu.&lt;/label&gt;&lt;br&gt;
                      &lt;i class="fab fa-creative-commons-remix" style="font-size:70px;"&gt;&lt;/i&gt;
                      &lt;br&gt;&lt;br&gt;
  
                      &lt;input type="hidden" value="" class="edit_hidden_noun_id" name=""&gt;
                      &lt;table class="table table-hover" id="edit_chainingBuild"&gt;
                          &lt;thead&gt;
                              &lt;tr style="font-size: 15px;"&gt;
                                  &lt;!-- &lt;th scope="col"&gt;Qty&lt;/th&gt; --&gt;
                                  &lt;th scope="col"&gt;Condiments&lt;/th&gt;
                                  &lt;th scope="col"&gt;Price&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody style="font-size:14px;"&gt;                 
  
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="edit_build_success_insert btn btn-primary"&gt;Build Done&lt;/button&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p><strong>I have here the image to proof that the value that i get always null.</strong>
  <a href="https://i.stack.imgur.com/95FtA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/95FtA.png" alt="Proof null"></a></p>