Duplicate Div With New ID

Question

I got a function that duplicates a div and increases the new div's id by 1

function duplicate(){
    // Get content to clone
    var line_to_clone = $('#fields_1').html();
    // Get new line id
    var next_line_id = $('.items').length + 1;
    // Add the div container
    var line_to_clone = '<div id="fields_' + next_line_id + '" class="items">' + line_to_clone + '</div>';
    // Create new line
    var new_line = line_to_clone.replace(/_1/gi, "_" + next_line_id);
    // Render it
    $('#renderer').append(new_line);
}

It will work but the ids are wrong when it hits 10

<div id="fields_8" class="items">
<div id="fields_9" class="items">
<div id="fields_100" class="items">
<div id="fields_111" class="items">
<div id="fields_122" class="items">
<div id="fields_133" class="items">
<div id="fields_144" class="items">

try to replace your code `var next_line_id = $('.items').length + 1;` with this 'var next_line_id = parseInt($('.items').length) + 1;` — Sunil Kumar, Aug 01 '16 at 09:49
do this `var next_line_id = parseInt( $('.items').length + 1);` — Santhucool, Aug 01 '16 at 09:49
Possible duplicate of [How to JQuery clone() and change id](http://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id) — Zakaria Acharki, Aug 01 '16 at 09:53

score 1 · Answer 1 · answered Aug 01 '16 at 09:58

1

Please check below snippet.

function duplicate(){
// Get content to clone
var line_to_clone = $('#fields_1').html();
// Get new line id
var next_line_id = $('.items').length + 1;
  
// Add the div container
var line_to_clone = '<div id="fields_' + next_line_id + '" class="items">' + line_to_clone + '</div>';
// Create new line

// Render it
$('#renderer').append(line_to_clone);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="renderer">
  <div id="fields_1" class="items">123</div>
</div>
<input type="button" value="add" onclick="duplicate()"/>

answered Aug 01 '16 at 09:58

Mohit Tanwani

6,608
2
14
32

Thanks for this it works too but i ended up using .clone because i added a remove button too. – John Aug 01 '16 at 16:57
That's not fare, fist accepted my answer and then removed it – Mohit Tanwani Aug 01 '16 at 17:01
Sorry about that mate as i said yours works too but the second solution is better for my issue. Voted up – John Aug 01 '16 at 17:11
No issues. Great to see you find my solution helpful atleast. – Mohit Tanwani Aug 01 '16 at 17:15

Mi-Creativity · Accepted Answer · 2016-08-01T18:25:30.233

1

Alternatively you can make use of jQuery .clone() function, also getting the id of the last item using jQuery :last selector then increase it by one before appending the html of the new item, like this:

jsFiddle 1

$('#btn-foo').on('click', function() {
  var lastItem = $('#renderer .items:last'),
    lastID = parseInt(lastItem.attr('id').replace('fields_', ''));
  $('#renderer').append(lastItem.clone().attr('id', "fields_" + (lastID + 1)));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn-foo">Add</button>
<hr>
<div id="renderer">
  <div id="fields_1" class="items"><span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>

Updated:

Upon a comment from the OP, there're issues of duplicating the values of input fields, also the values of id and name attributes must be unique, therefore, in this jsFiddle 2 we have them all fixed

edited Aug 01 '16 at 18:25

answered Aug 01 '16 at 10:47

Mi-Creativity

9,554
10
38
47

Thank you i ended up using your solution. – John Aug 01 '16 at 16:51
Is there a way to clear input fields in the cloned div so that its blank? – John Aug 01 '16 at 17:16
Something like this: `

` – John Aug 01 '16 at 17:26
check this [jsFiddle](https://jsfiddle.net/jme14Lh3/3/), it should clear the value in input fields I believe, but you still have other issues, about `name` and `id` values, those can't be repeated and should be unique – Mi-Creativity Aug 01 '16 at 17:35
1

this [jsFiddle](https://jsfiddle.net/jme14Lh3/6/) fixes the issues of having unique `name` and `id` attributes, as well as resetting the values of the input fields – Mi-Creativity Aug 01 '16 at 18:12

Duplicate Div With New ID

2 Answers2