Показать имя и размер файла для динамически создаваемых полей для загрузки. jQuery

Поля для загрузки файлов создаются динамически. При загрузке файла под кнопкой должно отображается имя и размер файла . Проблема состоит в том что информация отображается только на первом блоке при каждом загрузке.Помогите пожалуйста решить эту проблему.

Заранее спасибо

HTML

<div class="wt-addprojectsholder wt-tabsinfo">
    <div class="wt-tabscontenttitle wt-addnew">
        <h2>Add Your Projects</h2>
        <a href="javascript:void(0);" id="add_project">Add New</a>
    </div>
    <ul class="wt-experienceaccordion accordion" id="project_wrapper">
        <li id="project_list">
            <div class="wt-accordioninnertitle">
                <div class="wt-projecttitle collapsed" data-toggle="collapse" data-target="#proj_1"></div>
                <div class="wt-rightarea">
                    <a href="javascript:void(0);" class="wt-addinfo wt-skillsaddinfo" data-toggle="collapse" data-target="#proj_1">
                        <i class="lnr lnr-pencil"></i>
                    </a>
                    <a href="javascript:void(0);" id="remove_project" class="wt-deleteinfo">
                        <i class="lnr lnr-trash"></i>
                    </a>
                </div>
            </div>
            <div class="wt-collapseexp collapse" id="proj_1" aria-labelledby="accordioninnertitle" data-parent="#accordion">
                <div class="wt-formtheme wt-userform wt-formprojectinfo">
                    <fieldset>
                        <div class="form-group form-group-label">
                            <div class="wt-labelgroup">
                                <label for="project_file" data-proj="1">
                                    <span class="wt-btn">Select Files</span>
                                    <input type="file" name="file" id="project_file" data-proj="1" />
                                </label>
                                <span>Drop files here to upload</span>
                                <em class="wt-fileuploading">
                                    Uploading
                                    <i class="fa fa-spinner fa-spin"></i>
                                </em>
                            </div>
                        </div>
                        <div class="form-group">
                            <ul class="wt-attachfile">
                                <li>
                                    <span data-target-project-file-name="1"></span>
                                    <em data-target-project-file-size="1">
                                        <a href="javascript:void(0);" class="lnr lnr-cross"></a>
                                    </em>
                                </li>
                            </ul>
                        </div>
                    </fieldset>
                </div>
            </div>
        </li>
    </ul

jQuery

jQuery(function () {

        var project_count = 1;
        var project_max_fileds = 5;
          
          $('#add_project').click(function(event){
                   if (project_count < project_max_fileds) {
                          project_count++;

                          $('#project_wrapper').append(
                                   '<li id="project_list">'+
                                       '<div class="wt-accordioninnertitle">'+
                                            '<div class="wt-projecttitle collapsed" data-toggle="collapse" data-target="#proj_'+project_count+'">'+ 
                                            '</div>'+
                                            '<div class="wt-rightarea">'+
                                                 '<a href="javascript:void(0);" class="wt-addinfo wt-skillsaddinfo" data-toggle="collapse" data-target="#proj_'+project_count+'">'+
                                                   ' <i class="lnr lnr-pencil"></i>'+
                                                 '</a>'+
                                                 '<a href="javascript:void(0);" id="remove_project" class="wt-deleteinfo">'+
                                                    '<i class="lnr lnr-trash"></i>'+
                                                 '</a>'+
                                            '</div>'+
                                       '</div>'+
                                       '<div class="wt-collapseexp collapse" id="proj_'+project_count+'" aria-labelledby="accordioninnertitle" data-parent="#accordion">'+
                                            '<div class="wt-formtheme wt-userform wt-formprojectinfo">'+
                                                 '<fieldset>'+
                                                          '<div class="form-group form-group-label">'+
                                                               '<div class="wt-labelgroup">'+
                                                                    '<label for="project_file" data-proj="'+project_count+'">'+
                                                                           '<span class="wt-btn">Select Files</span>'+
                                                                           '<input type="file" name="file" id="project_file" data-proj="'+project_count+'">'+
                                                                    '</label>'+
                                                                    '<span>Drop files here to upload</span>'+
                                                                    '<em class="wt-fileuploading">Uploading'+
                                                                       ' <i class="fa fa-spinner fa-spin"></i>'+
                                                                    '</em>'+
                                                               '</div>'+
                                                          '</div>'+
                                                          '<div class="form-group">'+
                                                               '<ul class="wt-attachfile">'+
                                                                   '<li>'+
                                                                      '<span data-target-project-file-name="'+project_count+'"></span>'+
                                                                      '<em data-target-project-file-size="'+project_count+'">'+
                                                                         '<a href="javascript:void(0);" class="lnr lnr-cross"></a>'+
                                                                      '</em>'+
                                                                   '</li>'+
                                                               '</ul>'+
                                                          '</div>'+
                                                '</fieldset>'+
                                          '</div>'+
                                    '</div>'+
                               '</li>'              
                            );
                   }     
          });

          $("#project_wrapper").on("click", "#remove_project", function (event) {
               event.preventDefault();
               $(this).closest("#project_list").remove();
               project_count--;
          });

          $("#project_wrapper").on("change","#project_file",function(event){
               var value = $(this).attr("data-proj");
               var file = this.files[0];
               if (file) {
                
                    $("#project_wrapper").find("[data-target-project-file-name='"+value+"']").text('File name'+file.name);
                    $("#project_wrapper").find("[data-target-project-file-size='"+value+"']").text('File size'+file.size);
                }
          });

    });