JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <button onclick="addControls()">
 Add
  </button>
  
  <div>
     <ul id="slider">
       <li></li><li></li><li></li><li></li>
     </ul>
  </div>
  <ul id="slider-control">
  </ul>
</div>

CSS

ul li{display:inline-block;}

JavaScript

function addControls(){
var x = document.getElementById('slider').childElementCount; 
for (var i = 0; i < x; i++) {
  var ul = document.getElementById('slider-control');
  var li = document.createElement("li");
  var btn = document.createElement("Button");
  btn.onclick = function() { goto(i); };
  btn.appendChild(document.createTextNode(i+1));
  ul.appendChild(li);
  li.appendChild(btn);
}
}
function goto(index){
	alert(index);
}