title: Clear input value on dynamically add/remove inputs
body: <p>I have input element that can clear value when click the button. 
  Also this input can be dynamically adding or remove input element. 
  But I am stuck with when after add input element, the clear button is not working. </p>
  
  <p>This is what I tried so far here </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// ADD , Remove input
  var counter = 1,
    custom = $('#custom');
  $(function() {
    $('#add_field').click(function() {
      counter += 1;
      var newRow = $('&lt;div class="row' + counter + '"&gt;&lt;span class="wrap_input"&gt;&lt;input id="exception_' + counter + '" name="" type="text"&gt;&lt;button class="btn_clear"&gt;clear&lt;/button&gt;&lt;button class="remove-text-box"&gt;Remove&lt;/button&gt;&lt;/span&gt;&lt;/div&gt;');
      custom.append(newRow);
      (function(index) {
        newRow.find('.remove-text-box').click(function() {
          custom.find('.row' + index).remove();
        });
      })(counter);
    });
  });
   
  // clear input value 
  $('.wrap_input').each(function() {
   var $inp = $(this).find("input"),
        $cle = $(this).find(".btn_clear");
   $inp.on("input", function(){
     $cle.toggle(!!this.value);
    });
   $cle.on("touchstart click", function(e) {
     e.preventDefault();
      $inp.val("").trigger("input").focus();
      $inp.change();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn_clear { display: none; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button id="add_field" href="#"&gt;add input&lt;/button&gt;
  
  
  &lt;div id="custom"&gt;
    
    &lt;span class="wrap_input"&gt;
      &lt;input type="text" value=""&gt;
      &lt;button class="btn_clear"&gt;clear&lt;/button&gt;
    &lt;/span&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The first input is working well, but after adding input element clear button is not appeared. </p>
  
  <p>Please help.</p>