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

var x = document.getElementById('slider').childElementCount;
  for (var i = 0; i < x; i++) {
		(function (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);
  })(i);
}


function goto(index) {
  alert(index);
}