title: Not getting id of cloned div element in jQuery
body: <p>I have a div element whose id attribute is "<em>selectAll</em>". Using jQuery's <em>.clone()</em> method I am cloning that element and changing its <em>id</em> attribute to a new one using jQuery's <em>.prop()</em> method. This procedure of cloning that element and changing its id to a new one is done many times depending on user input. So, now I have one element with id attribute value "<em>selectAll</em>" and many clones of it with changed id. </p>
  
  <p>Within this element with id attribute value "<em>selectAll</em>" is one selection box with class name '<em>period</em>'. What I want is when the user changes the value in that select box its closest parent id should be displayed in an alert box. Between selection box and 'selectAll' there is no element who has an id attribute. </p>
  
  <p>When the user changes the selection value in the original div element, the alert box displays '<em>selectAll</em>', which is correct. But the problem is whenever the user changes selection values in a cloned element, the alert box doesn't appear at all.  </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>$("#docsUpload").change(function() {
     $("#multiShow").empty();                 // removes child elements
      var ele = document.getElementById($(this).attr('id'));
      var result = ele.files;
      var ff = result[0];
      $("#ff").html("&lt;strong&gt; File Name : &lt;/strong&gt;"+ ff.name);
  
      for(var x = 0;x&lt; result.length-1;x++){
         var fle = result[x+1];
         $('#multiShow').append("&lt;div class='row'&gt; &lt;div class='col-sm-3'&gt;&lt;/div&gt; &lt;div class='col-sm-6'&gt;&lt;hr&gt;");
         $('#multiShow').append("&amp;nbsp;&lt;strong&gt; File Name : &lt;/strong&gt;"+fle.name);
         $('#multiShow').append("&lt;/div&gt;&lt;div class='col-sm-3'&gt;&lt;/div&gt;&lt;/div&gt;");
         $("#selectAll").clone().prop({ id:'thisisid_'+x}).appendTo('#multiShow');
      }
  });
  
  
  $(document).ready(function() {
    $(".static").show(); // always display on page load
    $(".period").on('change', function() { //selection box value changed
  
      var realId = $(".period").closest("div[id]").attr("id"); //get id
      alert(realId); // display id in alert box (only shows 'selectAll')
  
  
      // below code can be ignored
      $('.dateSelector').hide();
      var operation = ' .' + this.value;
      $(operation).show();
    }); // on period change
  }); // document ready state</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
   &lt;input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" /&gt;
  
  
  &lt;div id="selectAll"&gt;
          &lt;select name="period" class="period"&gt;
            &lt;option value="static" selected="selected"&gt;Static&lt;/option&gt;
            &lt;option value="monthly"&gt;Monthly&lt;/option&gt;
            &lt;option value="quaterly"&gt;Quaterly&lt;/option&gt;
            &lt;option value="semester"&gt;Semester&lt;/option&gt;
            &lt;option value="yearly"&gt;Yearly&lt;/option&gt;
            &lt;option value="other"&gt;Other&lt;/option&gt;
          &lt;/select&gt;
   &lt;/div&gt;
  
   &lt;div id="multiShow"&gt; &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>