Кнопка «Скрыть и показать» не работает после добавления

Question

У меня есть простой способ скрыть и показать. Я пытался использовать функцию live(), и даже этот метод не работает. Я хочу добавить <div>, и с каждым <div> должна быть кнопка скрытия и показа. Кроме того, <div> должно скрываться, когда я нажимаю на скрыть.

$(document).ready(function() {
  var max_fields = 20; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var x = 1; //initlal text box count
  
  $(add_button).click(function() { //on add input button click
    if (x <= max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div id="myclass""><input type="text" name="mytext[]"/><button onclick class="hide_field">Hide</button><button onclick class="show_field">show</button></div>');
    }
  });
});

$("#myclass").on("click", ".hide_field", function() {
  $(this).hide();
});

$("#myclass").on("click", ".show_field", function() {
  $(this).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input_fields_wrap">
  <button class="add_field_button">Add Comment</button>
  <br>
  <div id="myclass"><input type="text" name="mytext[]">
  </div>
</div>

Answer 1

Реализация изменений, предложенных matthias_h:

• с использованием класса вместо идентификатора
• с использованием формы трех аргументов on click обработчик
• нацеливает ввод с помощью $(this).closest

$(document).ready(function() {
  var max_fields = 20; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var x = 1; //initial text box count
  
  $(add_button).click(function() { //on add input button click
    if (x <= max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div class="myclass""><input type="text" name="mytext[]"/><button onclick class="hide_field">Hide</button><button onclick class="show_field">Show</button></div>');
    }
  });
});

$(document.body).on("click", ".myclass .hide_field", function() {
    $(this).closest("div").children("input").hide();
});

$(document.body).on("click", ".myclass .show_field", function() {
    $(this).closest("div").children("input").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input_fields_wrap">
  <button class="add_field_button">Add Comment</button>
  <br>
  <div class="myclass"><input type="text" name="mytext[]">
  </div>
</div>