jQuery - adding 2 insertAfter elements instead of 1

Question

I'm trying to insertAfter a span element when select another ID to hide other elements.

But the problem is when I have selected an ID once, it inserts a span element. Then when I select another ID, it should hide inserted span element, but it doesn't.

Later on, when I select again same ID, it insertsAfter another span element. That second element later works with the hide code, but first inserted element doesn't.

It adds #omniva double elemnt, and hides only one of it

<script>
$("#flat").click(function(){
  $("#show-lp24-select").hide();
  $("#show-omniva24-select").hide();
  $("#text-area-comment").show();
});

$("#lp24").click(function(){
  $("#text-area-comment").hide();
  $("#show-omniva24-select").hide();
  $("#show-lp24-select").insertAfter( $( "#lp24" ) ).show();
});

$("#button-shipping-method").click(function(){
  var selectBoxVal = $("#select-box-lp24").val();    //VALUE OF SELECT BOX
  $("#shipping-method-place").val("LP 24/7 terminalo adresas - "+selectBoxVal);   
});

$("#omniva").click(function(){
  $("#show-lp24-select").hide();
  $("#text-area-comment").hide();
  $("#show-omniva24-select").insertAfter( $( "#omniva" ) ).show();
});

$("#button-shipping-method").click(function(){
  var selectBoxVal = $("#select-box-omniva24").val();    //VALUE OF SELECT BOX
  $("#shipping-method-place").val("Omniva 24/7 terminalo adresas - "+selectBoxVal);   
});
</script>

Answer 1

Three concepts below:

1. Use .on() for your event handlers.
2. Use delegation on dynamic stuff.
3. You can coma-separate the selectors in jQuery.

Have a close look at the voluntarly uncommented changes. And if that fails... Please have a look at the console.

<script>
$(document).on("click","#flat",function(e){
  console.log("#"+e.target.id+" click!);
  $("#show-lp24-select, #show-omniva24-select").hide();
  $("#text-area-comment").show();
});

$(document).on("click","#lp24",function(e){
  console.log("#"+e.target.id+" click!);
  $("#text-area-comment, #show-omniva24-select").hide();
  $("#show-lp24-select").insertAfter( $( "#lp24" ) ).show();
});

$(document).on("click","#button-shipping-method",function(e){
  console.log("#"+e.target.id+" click!);
  var selectBoxVal = $("#select-box-lp24").val();    //VALUE OF SELECT BOX
  $("#shipping-method-place").val("LP 24/7 terminalo adresas - "+selectBoxVal);
});

$("document).on("click",#omniva",function(e){
  console.log("#"+e.target.id+" click!);
  $("#show-lp24-select, #text-area-comment").hide();
  $("#show-omniva24-select").insertAfter( $( "#omniva" ) ).show();
});

$(document).on("click","#button-shipping-method",function(e){
  console.log("#"+e.target.id+" click!);
  var selectBoxVal = $("#select-box-omniva24").val();    //VALUE OF SELECT BOX
  $("#shipping-method-place").val("Omniva 24/7 terminalo adresas - "+selectBoxVal);
});
</script>

«That second element later works...»

     ...would translate into "After a page refresh" or "days after"... How would one know? ;)