jQuery replaceWith() not replace new value

Question

I have simple html code with 2 button and script to replace element when click each button. When I click button 1 it replace right way as expected. But continue click button 2 it still replace old value which I have when click button 1.

Here is my code:

 jQuery(document).ready(function() { $("button[name=btn-add]").on('click', function(e) { e.preventDefault(); let Button_Id = $(this).attr("id") console.log(Button_Id); let test_content = $("#div-clone"); stri = '<div>' + Button_Id + '</div>'; test_content.find('#hello').replaceWith(Button_Id); test_content = test_content.html(); console.log(test_content); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <button type="button" class="btn btn-outline-success" name="btn-add" id="1"> <i class="fas fa-plus fa-1x"></i> <span style="padding-left:3px;"> button 1 </span> </button> <button type="button" class="btn btn-outline-success" name="btn-add" id="2"> <i class="fas fa-plus fa-1x"></i> <span style="padding-left:3px;"> button 2 </span> </button> <div name="div_test" id="div-clone" style="display:none"> <span id="hello"> hello </span> </div>

When click button 1 and then click button 2:

result:

// 1 1 // 2 1

expect:

// 1 1 // 2 2

Answer 1

You cannot find the element with the id of 'hello' on the second click because its already been removed. But you can modify your code to add a new div with the sane id again. So you replace <div id="hello">hello</div> with <div id="hello">1</div> or <div id="hello">2</div> depending on the button id that you clicked:

 jQuery(document).ready(function() { $("button[name=btn-add]").on('click', function(e) { e.preventDefault(); let Button_Id = $(this).attr("id") console.log(Button_Id); let test_content = $("#div-clone"); stri = '<div id="hello">' + Button_Id + '</div>'; test_content.find('#hello').replaceWith(stri); test_content = test_content.text(); console.log(test_content); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <button type="button" class="btn btn-outline-success" name="btn-add" id="1"> <i class="fas fa-plus fa-1x"></i> <span style="padding-left:3px;"> button 1 </span> </button> <button type="button" class="btn btn-outline-success" name="btn-add" id="2"> <i class="fas fa-plus fa-1x"></i> <span style="padding-left:3px;"> button 2 </span> </button> <div name="div_test" id="div-clone" style="display:none"> <span id="hello"> hello </span> </div>

Answer 2

The problem in your code was you were replacing the div, so basically when you click on the second time the " hello " div is not there instead of replacing you can change the text inside div like below

 jQuery(document).ready(function() { $("button[name=btn-add]").on('click', function(e) { e.preventDefault(); let Button_Id = $(this).attr("id") $("#div-clone").find('#hello').text(Button_Id); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <button type="button" class="btn btn-outline-success" name="btn-add" id="1"> <i class="fas fa-plus fa-1x"></i> <span style="padding-left:3px;"> button 1 </span> </button> <button type="button" class="btn btn-outline-success" name="btn-add" id="2"> <i class="fas fa-plus fa-1x"></i> <span style="padding-left:3px;"> button 2 </span> </button> <div name="div_test" id="div-clone"> <span id="hello"> hello </span> </div>

Note

If you wanted to add the element you can use like below, so eventhough it replaces the next time when you are clicking we are replacing with a div of id " hello " so it will be able to find it out from the dom.

$("#div-clone").find('#hello').text('<div id="hello">' + Button_Id + '</div>');