How to clone and change id?

by 
$('#cloneDiv').click(function(){


  // get the last DIV which ID starts with ^= "klon"
  var $div = $('div[id^="klon"]:last');

  // Read the Number from that DIV's ID (i.e: 3 from "klon3")
  // And increment that number by 1
  var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;

  // Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
  var $klon = $div.clone().prop('id', 'klon'+num );

  // Finally insert $klon wherever you want
  $div.after( $klon.text('klon'+num) );

});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<button id="cloneDiv">CLICK TO CLONE</button> 

<div id="klon1">klon1</div>
<div id="klon2">klon2</div>

Scrambled elements, retrieve highest ID

Say you have many elements with IDs like klon--5 but scrambled (not in order). Here we cannot go for :last or :first, therefore we need a mechanism to retrieve the highest ID:

const all = document.querySelectorAll('[id^="klon--"]');
const maxID = Math.max.apply(Math, [...all].map(el => +el.id.match(/\d+$/g)[0]));
const nextId = maxID + 1;

console.log(`New ID is: ${nextId}`);
<div id="klon--12">12</div>
<div id="klon--34">34</div>
<div id="klon--8">8</div>

More Related Contents:

  1. Clone a file input element in Javascript
  2. how do i submit message to my email by html or js?
  3. JS hide function error
  4. How to create button to check uncheckable checkbox
  5. Need to scroll to bottom whenever a new div is added at bottom
  6. Definitive way to trigger keypress events with jQuery
  7. Validation of file extension before uploading file
  8. Which keycode for escape key with jQuery
  9. jQuery pass more parameters into callback
  10. what is right way to do API call in react js?
  11. Remove all classes that begin with a certain string
  12. Cross domain POST request is not sending cookie Ajax Jquery
  13. Commonly accepted best practices around code organization in JavaScript [closed]
  14. Setting onbeforeunload on body element in Chrome and IE using jQuery
  15. How to show a running progress bar while page is loading
  16. Use jQuery to detect whether a device can make telephone calls (supports “tel://” protocol)
  17. How do I select an element with its name attribute in jQuery? [duplicate]
  18. jQuery Validation using the class instead of the name value
  19. In Firebase when using push() How do I pull the unique ID
  20. jQuery/Javascript – How to wait for manipulated DOM to update before proceeding with function
  21. Adding a table row in jQuery
  22. Using jQuery AJAX to download a binary file
  23. Inconsistent behavior of toLocaleString() in different browser
  24. Sorting an Array of JavaScript Objects a Specific Order (using existing function)
  25. Sending a MediaStream to host Server with WebRTC after it is captured by getUserMedia
  26. JQuery function only works within a function
  27. How do I find which JavaScript is changing an element’s style?
  28. jQuery click() still being triggered after .clickable class is removed
  29. Process a continuous stream of JSON
  30. jquery serialize and multi select dropdown

Leave a Comment