javascript increase id for every click

Question

i want to increase the id for every click. I spent 2 hours but somehow i couldnt manage to do it.

 var app = document.getElementById('app'); var circle = document.querySelector('.mny-circle'); var item = document.querySelector('.mny-item'); var button = document.querySelector('.mny-btn'); var id = 0; var UIcontroller = function() { var newItem = '<div id="item-%id%" class="mny-item">Deneme</div>'; var addItem = newItem.replace('%id%', id); var clickbtn = function() { button.addEventListener('click', function() { circle.insertAdjacentHTML('beforeend', addItem); }); id++; } clickbtn(); } UIcontroller(); 

 <div id="app"> <button class="btn btn-sm btn-warning mny-btn">Click</button> <div class="mny-circle"></div> </div> 

Answer 1

should be like this :

 button.addEventListener('click', function() {
  var addItem = newItem.replace('%id%', id);
  circle.insertAdjacentHTML('beforeend', addItem);
  id++;
});

you need to increment id in the click event.

Answer 2

Here you are.

 var app = document.getElementById('app'); var circle = document.querySelector('.mny-circle'); var item = document.querySelector('.mny-item'); var button = document.querySelector('.mny-btn'); var UIcontroller = function() { var id = 0; var newItem = '<div id="item-%id%" class="mny-item">Deneme</div>'; var clickbtn = function() { button.addEventListener('click', function() { circle.insertAdjacentHTML('beforeend', newItem.replace('%id%', id)); id++; }); } clickbtn(); } UIcontroller(); 

 <div id="app"> <button class="btn btn-sm btn-warning mny-btn">Click</button> <div class="mny-circle"></div> </div>