JSFiddle - React, Tailwind, and code Playground

by Rajesh Dixit

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 =goto.bind(btn, i+1);
      btn.appendChild(document.createTextNode(i + 1));
      ul.appendChild(li);
      li.appendChild(btn);
   }
}

function goto(index) {
   console.log(this, index);
}