JSFiddle - React, Tailwind, and code Playground

by Shubham Agrawal

HTML

<div id="arrayStatus">

</div>

CSS

.button:active,
.active {
  background-color: red;
  color: white;
}

JavaScript

//creating buttons for picking coins
function createButton(type, className, id, value, onclickFunction) {
  //comments are for the coins buttons:
  var button = document.createElement("input"); // input type is the simplest
  button.type = type; //"button";
  button.className = className; // 'Button';
  button.id = id; // id;
  button.value = value; // id;
  button.onclick = onclickFunction; // ""

  //adding the just created coin to screen
  var divCoinPickScrn = document.getElementById("arrayStatus");
  divCoinPickScrn.appendChild(button);
  var space = document.createTextNode(" ");
  divCoinPickScrn.appendChild(space);


}

$(document).ready(function() {

  //creating 99 buttons with id same as their number:
  for (var i = 2; i <= 100; i++) { // function createButton(type , className , id , value , onclickFunction)
    createButton('button', 'button', i, i, "");
  }

  // listener for clicking
  $('.button').click(function(e) {
$('.button').removeClass("active");
    $(this).toggleClass("active");
    e.preventDefault();
  });
});