jQuery - добавление 2 элементов insertAfter вместо 1

Question

Я пытаюсь insertAfter элемент span при выборе другого идентификатора, чтобы скрыть другие элементы.

Но проблема в том, когда я выбрал ID один раз, он вставляет span элемент. Затем, когда я выбираю другой идентификатор, он должен скрывать вставленный элемент span, но это не так.

Позже, когда я снова выбираю тот же идентификатор, он insertsAfter другой элемент span. Этот второй элемент позже работает с кодом скрытия, но первый вставленный элемент - нет.

Добавляет #omniva double elemnt и скрывает только одну из них

<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

Три концепции ниже:

1. использование .on() для ваших обработчиков событий.
2. Используйте делегирование на динамические вещи.
3. Вы можете разделить селекторы в jQuery.

Внимательно посмотрите на добровольно прокомментированные изменения. И если это не поможет... Пожалуйста, посмотрите на консоль.

<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>

"Этот второй элемент позже работает..."

... будет переводиться как "После обновления страницы" или "дней после"... Как узнать? ;)