How to change data-attr when clone div

Question

I have issue with cloning a div.

I have a div with id=director-uploads1. I want to append a div with class=director-uploads-hidden to it. I want to set newly cloned div with class director-uploads-hidden data-number to be with value #director-uploads1 data-number + 1.

$(document).ready(function() {
  function clone(){
     var number = $('#director-uploads1').attr('data-number');
     var director = $('.director-uploads-hidden').html();

                var clone = $('#director-uploads1').append(director)
                .find("*")
                .each(function() {
                   var name = $(this).attr('name');
                })
                .on('click', 'button.clone', clone);
    //I want to get $("#director-uploads1") attr data-number and to set data-number to the newly cloned div to be current value + 1
    //First I did it in this way $("#director-uploads1").attr('data-number', parseInt(number)+1);  but I don't want to change initial value of div, only value of the cloned div

    
    }
   $("button#add-director").on("click", clone);
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div class="director-uploads number" id="director-uploads1" data-number="0" data-changed="0">
   //some data
   </div>
 <div class="director-uploads-hidden number" style="display:none;" data-number="1" data-changed="0">
   //cloned data
   </div>
 <button type="button" class="btn btn-success" id="add-director">Add Additional Director</button>

So, that after that I pass data to controller via ajax, I can get data-number of each separate div to be different, so that I can differ them.

How could I do that? Thanks.

Updated:

  $(document).ready(function() {
    function clone(){
    var number = $('.director-uploads-hidden').attr('data-number');
       
        var director = $('.director-uploads-hidden').clone(true);
        director.data("number", parseInt(number)+1);
        $('#director-uploads1').append(director);
        director.css("display", "block");
      

    }

    $("button#add-director").on("click", clone);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div class="director-uploads number" id="director-uploads1" data-number="0" data-changed="0">
   //some data
   </div>
 <div class="director-uploads-hidden number" style="display:none;" data-number="1" data-changed="0">
   //cloned data
   </div>
 <button type="button" class="btn btn-success" id="add-director">Add Additional Director</button>

Thank you all for help, maybe it's not the best solution, but I tried with this and it's working:

$(document).ready(function() {
  function clone(){
   var number = $('#director-uploads1').attr('data-number');
        $("#director-uploads1").attr('data-number', parseInt(number)+1);
        $('.director-uploads-hidden').find('.app-file').attr('data-item', parseInt(number)+1);
        var director = $('.director-uploads-hidden').html();

        $('#director-uploads1').append(director)
            .find("*")
            .each(function() {
                var name = $(this).attr('name');
            })
            .on('click', 'button.clone', clone);
  
   }

    $("button#add-director").on("click", clone);
  
  $("html").on('change', '.app-file', function(){
       var number = $(this).attr('data-item');
        console.log(number);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <div class="director-uploads number" id="director-uploads1" data-number="0" data-changed="0">
 
    <input type="file" class="app-file director_documents" data-item="0" name="director_front_passport[]"/>
    </div>
 <div class="director-uploads-hidden number" style="display:none;" data-number="1" data-changed="0">
    <input type="file" class="app-file director_documents" data-item="0" name="director_front_passport[]"/>
   </div>
<button type="button" class="btn btn-success" id="add-director">Add Additional Director</button>

Answer 1

Try with this snippet.

You can change the attributes and append position as per your need.

//Get old number from the first div
var newNumber = parseInt($('#director-uploads1').attr('data-number'));
$('#add-director').click(function(){
//Get the new length that you would like to set for id
  var newLength = parseInt($('.number').length)+1;
//Increment the old number value with +1 to set the new number for every div.
  newNumber += 1;
  $('div#director-uploads1')
    .clone()
    .attr('id', 'director-uploads'+newLength)
    .attr('data-number', newNumber)
    .removeClass()
    .addClass('director-uploads-hidden number')
    .html('clone data: number'+newNumber +':  id '+' director-uploads'+newLength)
    .insertBefore('#add-director');
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div class="director-uploads number" id="director-uploads1" data-number="0" data-changed="0">
   //some data
   </div>
 <button type="button" class="btn btn-success" id="add-director">Add Additional Director</button>