title: how to bind dynamically created element in a function to another dynamically created element in another function
body: <p>I have two functions one that creates an image preview for each image uploaded and another one that clones the input file if the user clicks on choose file button to prevent the previous file from being removed.</p>
  <p><strong><a href="https://jsfiddle.net/mzLshnde/5/" rel="nofollow noreferrer">jsFiddle</a></strong></p>
  <p>this is the image preview function</p>
  <pre><code>var multiImgPreview = function(input, imgPreviewPlaceholder) {
  
      if (input.files) {
       $(&quot;#multipleImageUpload&quot;).on(&quot;change&quot;, function(e) {
          var filesAmount = input.files.length;
  
          for (i = 0; i &lt; filesAmount; i++) {
              var reader = new FileReader();
  
              reader.onload = function(event) {
                  $(&quot;&lt;span class=\&quot;pip\&quot;&gt;&quot; + 
                  &quot;&lt;span class=\&quot;remove_icon\&quot;&gt;Remove&lt;/span&gt;&quot; +
                  &quot;&lt;img src=\&quot;&quot; + event.target.result + &quot;\&quot; title=\&quot;&quot; + &quot;\&quot;/&gt;&quot; +
                  &quot;&lt;/span&gt;&quot;).appendTo(imgPreviewPlaceholder);
   
                  $(&quot;.remove_icon&quot;).click(function(){
                     $(this).parent(&quot;.pip&quot;).remove();
                   }); 
              }
  
              reader.readAsDataURL(input.files[i]);
          }
        });
      }
  };
  </code></pre>
  <p>and this is the clone function</p>
  <pre><code>$(document).on('click', '#multipleImageUpload', function() {
      
      // add to preview
      multiImgPreview(this, 'div.imgPreview');
      
      //clone
      
      var originalInput = $(this), cloned = originalInput.clone();
      
      // move
      originalInput.attr(&quot;id&quot;, Date.now());
      originalInput.removeClass('multipleImageUpload');
      originalInput.appendTo($('#multipleFilesPH'));
      
      cloned.attr(&quot;id&quot;, &quot;multipleImageUpload&quot;);
      cloned.insertAfter($('#multipleFilesPH'));
  
      originalInput = null;
      cloned = null;
  
  });
  </code></pre>
  <p>the issue here is when I click remove it only removes the preview of the image and not the input cloned, how to dynamically bind the cloned input to the image preview in order to remove the image and never send it to the server?</p>