JSFiddle - React, Tailwind, and code Playground

by Manpreet Singh

HTML

<div class="container" id="clock" numElements="7" >
      <div id="0"  class="card container-item-1 ">7</div>
      <div id="1"  class="card container-item-2 ">1</div>
      <div id="2"  class="card container-item-3">2</div>
      <div id="3"  class="card container-item-4">3</div>
      <div id="4"  class="card container-item-5">4</div>
      <div id="5"  class="card container-item-6" >5</div>
      <div id="6"  class="card container-item-7 ">6</div>
</div>

CSS

.container-item-1
{
  left : -20px;
  position: absolute;
  transition : left .15s
}

.container-item-2
{
  left : 0px;
  position: absolute;
  transition : left .15s
}

.container-item-3
{
  left : 22px;

  position: absolute;
  transition : left .15s
}
.container-item-4
{
  left : 44px;
  position: absolute;
  transition : left .15s
}
.container-item-5
{
  left : 66px;
  position: absolute;

  transition : left .15s
}
.container-item-6
{
  left :88px;
  position: absolute;
  transition : left .15s
}
.container-item-7
{
  left :110px;
  position: absolute;
  transition : left .15s
}
.container
{
    overflow: hidden;
    height: 146px;
    width : 120px;
    position: relative;
    outline : 0;
}

.card
{
    height : 40px;
    font-size: 40px;
    border: 1px solid black;
}

JavaScript

document.getElementById("clock").addEventListener("click",wheelHandler);

function moveUp(clock, numElements, middlePoint, index) {
   
   var delta = middlePoint - index;
   var startIndex = parseInt(numElements) - delta  ;

   var count = middlePoint - index;
   var i = numElements - count;
   
   var idCount = 0;
   
   var newClock = document.createElement("div");
   
  for (var i = parseInt(numElements) -1 ; i >= startIndex ; i--)
  {
  	var node = document.getElementById(i);
    var adpNode = document.adoptNode(node);
    clock.insertBefore(adpNode, clock.firstChild);
  }
  
  var cards = clock.getElementsByClassName("card");

	var wheelItems = Array.prototype.filter.call(cards, 	     function(card){
      return card.nodeName === 'DIV';
  });
	
  var id =0;
  for(; id <  wheelItems.length;id++)
  { 
    removeClass(wheelItems[id], "container-item-");
    var clsName = "container-item-" + (id+1);
    wheelItems[id].classList.add(clsName);
    wheelItems[id].id = id;

 	 }
}

function moveDown(clock, numElements, middlePoint, index) 
{
   var count = index - middlePoint;
   var delta =  index - middlePoint;
   var startIndex = 0  ;
   var idCount = 0;
   
        
   for (var i = startIndex ; i < delta ; i++)
  {
  	var node = document.getElementById(i);
    var adpNode = document.adoptNode(node);
    clock.appendChild(adpNode);
  }
  
  var cards = clock.getElementsByClassName("card");

  var wheelItems = Array.prototype.filter.call(cards, function(testElement){
      return testElement.nodeName === 'DIV';
  });
	
  var id = 0;
  for(; id <  wheelItems.length; id++)
  { 
    removeClass(wheelItems[id], "container-item-");
    var clsName = "container-item-" + (id+1);
    wheelItems[id].classList.add(clsName);
    wheelItems[id].id = id;

    console.log(wheelItems[id]);
 	 }
}

function removeClass(theDiv, classToBeRemoved) {
  var classContent = theDiv.className;
  var expr = /classToBeRemoved/;
 	var cl = classContent.split(" ");
    var newcl =[];
   ...