How to find the closest table row using jQuery?

Question

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.

The is the Table B, Where this code use for replacing new table row to the Table A

    $('#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 = '<img src=/storage/' + cat_condi_image + ' class="responsive-img" style="width:100px;">';

            // $('#edit_chainingBuild').append("<tr class='clickable-row'><td>" + Qty + "</td><td class='clickable-row-condiments'>" + Condiments + "</td><td>" + Price + "</td><td style='display:none;' data-attribute-chain-id="+menu_builder_details_id +" class='data-attribute-chain-id'>"+menu_builder_details_id+"</td></tr>");

            $('table#edit_table_chaining_condiments').append("<tr class='edit_condimentsClicked' style='font-size:14px; border:none;'><td>"+condiment_section_name  +"</td><td class='edit_condimentsScreenNameClicked'>" + cat_condi_screen_name + "</td><td class='edit_condimentsScreenPriced'>" + cat_condi_price + "</td><td>"+image+"</td></tr>");

          });

          $("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 = '<input type="number"  id="qty" name="qty" class="form-control changeQuantity" value="1" min="1">';
              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("<tr data-attribute-chain-id=" + id_to_edit_build + " class='clickable-row'><td class='new_condiments_name'>"+condiments_name+"</td><td>"+condimentsScreenPriced+"</td><td style='display:none;' data-attribute-chain-id="+id_to_edit_builders +" class='data-attribute-chain-id'>"+id_to_edit_builders+"</td></tr>");

              $('#EditcondimentsBuilderModal').modal('hide');

          });


        },
        error:function(response){
          console.log(response);
        }
      });

      $('#EditcondimentsBuilderModal').modal('show'); 


});

Looking forward if the table row already replace, I want to get the value of the class of new_condiments_name . So I create a variable to find the class of new_condiments_name. It look like this.

var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();

So now when I try alert the variable new_condiments_name using the click function it shows null only.

$('.edit_build_success_insert').click(function(){
      var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();
      alert(new_condiments_name);
});

My Html Table:

<div class="modal-body">

            <div class="container">
                <div class="header" style="text-align: center;">
                    <br>
                    <h3 style="color:#007BFF;">Build Your Chain Button</h3> 
                    <label>This button will be served as customers menu.</label><br>
                    <i class="fab fa-creative-commons-remix" style="font-size:70px;"></i>
                    <br><br>

                    <input type="hidden" value="" class="edit_hidden_noun_id" name="">
                    <table class="table table-hover" id="edit_chainingBuild">
                        <thead>
                            <tr style="font-size: 15px;">
                                <!-- <th scope="col">Qty</th> -->
                                <th scope="col">Condiments</th>
                                <th scope="col">Price</th>
                            </tr>
                        </thead>
                        <tbody style="font-size:14px;">                 

                        </tbody>
                    </table>
                </div>
            </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="edit_build_success_insert btn btn-primary">Build Done</button>
          </div>

I have here the image to proof that the value that i get always null.

Answer 1

$('table .edit_build_success_insert').click(function(){
      var new_condiments_name = $(this).closest("tr").find(".new_condiments_name").text();
      alert(new_condiments_name);
});