Jquery replaceWith not working on multiple divs

Question

So, I created this script which works nice:

  $(function() { $(".decorrer").click(function(e) { x = jQuery('#1').clone().attr("id", "dinamics"); jQuery('#dinamics').replaceWith(jQuery(x)); }); $(".Futuras").click(function(e) { x = jQuery('#2').clone().attr("id", "dinamics"); jQuery('#dinamics').replaceWith(jQuery(x)); }); $(".Passadas").click(function(e) { x = jQuery('#3').clone().attr("id", "dinamics"); jQuery('#dinamics').replaceWith(jQuery(x)); }); $(".2017").click(function(e) { x = jQuery('#sete').clone().attr("id","something"); jQuery('#something').replaceWith(jQuery(x)); }); 

 <div class="col-md-3" id="status"> <ul> <li class="decorrer"><a href="#">A decorrer</a></li> <li class="Futuras"><a href="#">Futuras</a></li> <li class="Passadas"><a href="#">Passadas</a></li> <li class="2017"><a href="#">Passadas</a></li> </ul> </div> <div class="col-md-7" id="dinamics"> </div> <div style="display:none;"> <div id="1"> <p>content1</p> </div> <div id="2"> <p>content2</p> </div> <div id="3"> <div class="col-md-1" id="years"> <ul> <li class="2016"><a href="#">2017</a></li> <li class="2015"><a href="#">2016</a></li> </ul> </div> </div> <div class="col-md-6" id="pastExpos"> <div id="something"> <h3>something</h3> </div> </div> <div id="sete"> <div class="col-md-6"> <h3>dezassete</h3> </div> </div> </div> 

But as soon as I change the li class="2017" from the ul under div class="status" to the ul under div class="years" (which is its intended placement), it stops working. Can you help?

Thank you

Answer 1

When you change the <li> class, you have to change in your Jquery too :

$(".2017").click(function(e) {
    x = jQuery('#sete').clone().attr("id","something");
    jQuery('#something').replaceWith(jQuery(x));
    });

Because you're selecting the 2017 class, if you change in HTML and not in Jquery, the selector will point to nothing.