jQueryのクローンdiv要素のIDが取得されない

Question

id属性が "selectAll"のdiv要素があります。 jQueryの.clone（）メソッドを使用しています。私はその要素をクローニングしており、id属性をjQueryの.prop（）メソッドを使用して新しい属性に変更しています。この要素を複製し、そのIDを新しいものに変更するこの手順は、ユーザーの入力に応じて何度も実行されます。だから、私はid属性値 "selectAll"を持つ1つの要素と、idを変更した多くのクローンを持っています。 id属性の値でこの要素内

「のSelectAllは、」クラス名が「期間」が1つの選択ボックスです。私が望むのは、ユーザーがその選択ボックスの値を変更して、最も近い親IDを警告ボックスに表示する必要がある場合です。選択ボックスと 'selectAll'の間には、id属性を持つ要素はありません。

元のdiv要素の選択値を変更すると、警告ボックスに「selectAll」と表示されます。これは正しいです。しかし、問題は、ユーザーがクローンされた要素の選択値を変更するたびに、警告ボックスがまったく表示されないことです。 .clone()を呼び出すとき

$("#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("<strong> File Name : </strong>"+ ff.name); 
 

 
    for(var x = 0;x< result.length-1;x++){ 
 
     var fle = result[x+1]; 
 
     $('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>"); 
 
     $('#multiShow').append("&nbsp;<strong> File Name : </strong>"+fle.name); 
 
     $('#multiShow').append("</div><div class='col-sm-3'></div></div>"); 
 
     $("#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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" /> 
 

 

 
<div id="selectAll"> 
 
     <select name="period" class="period"> 
 
      <option value="static" selected="selected">Static</option> 
 
      <option value="monthly">Monthly</option> 
 
      <option value="quaterly">Quaterly</option> 
 
      <option value="semester">Semester</option> 
 
      <option value="yearly">Yearly</option> 
 
      <option value="other">Other</option> 
 
     </select> 
 
</div> 
 

 
<div id="multiShow"> </div>