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>

Answer 2

jQuery's clone() method should help you:

$(document).ready(function() {
  var number = parseInt($('#director-uploads1').data('number'));

  function clone(){
    var director = $('.director-uploads-hidden').clone(true); //true will cause it to clone all associated data and events as well
    director.data("number", number+1);
    director.removeClass("director-uploads-hidden");
    director.css("display", "block"); 
    //if you want to add any other extra data or events, do it here before appending the object
    $('#director-uploads1').append(director);
    number++;
  }

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

See https://api.jquery.com/clone/ for more info on the quirks of this method. You may need to do some more tweaking depending on your precise situation and requirements.

Answer 3

Your clone variable won't be holding a clone of #director-uploads1 it's going to be the collection that find('*') creates.

And $('.director-uploads-hidden').html() will only get the inner html, not the outer div tag that holds the data attribute.

To make a clone you would simply use the clone() jQuery method

var $clone = $('.director-uploads-hidden').clone();

After that to change the data attribute you just set it from $clone not $("#director-uploads1")

$clone.data('number', parseInt(number,10)+1);
//or
$clone.attr('data-number', parseInt(number,10)+1);

Also

.on('click', 'button.clone', clone);

Is trying to set the click handler as your element not your function, because the local variable clone is named the same as your function. Rename your clone variable, for instance like $clone as in the example above.