JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

HTML

<div class="container">
  <div class="buttons">
    <div class="item" id="a1" data-id="1" rel="a">1</div>
    <div class="item" id="b1" data-id="1" rel="b">2</div>
    <div class="item" id="c1" data-id="1" rel="c">3</div>
    <div class="item" id="d1" data-id="1" rel="d">4</div>
    <div class="item" id="e1" data-id="1" rel="e">5</div>
    <div class="item" id="f1" data-id="1" rel="f">6</div>
  </div>

  <div class="add" id="add1">
    <div class="sum">0</div>
    <input type="text" id="state">
  </div>
</div>


<div class="container">
  <div class="buttons">
    <div class="item" id="a1" data-id="1" rel="a">1</div>
    <div class="item" id="b1" data-id="1" rel="b">2</div>
    <div class="item" id="c1" data-id="1" rel="c">3</div>
    <div class="item" id="d1" data-id="1" rel="d">4</div>
    <div class="item" id="e1" data-id="1" rel="e">5</div>
    <div class="item" id="f1" data-id="1" rel="f">6</div>
  </div>

  <div class="add" id="add1">
    <div class="sum">0</div>
    <input type="text" id="state">
  </div>
</div>

CSS

.container {
  width: 100%;
  max-width: 550px;
  background-color: #d8dbdf;
  margin: 0px auto;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  position: relative;
  margin-top: 50px;
  overflow: hidden;
  font-family: helvetica, arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.buttons {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  float: left;
  overflow: hidden;
}

.item {
  width: 30px;
  height: 20px;
  float: left;
  text-align: center;
  line-height: 25px;
  margin-right: 5px;
}

.add {
  width: 100%;
  float: left;
  padding: 10px;
}

.item:nth-child(2n+1) {
  background-color: red;
}

.pa {
  width: 30px;
  height: 30px;
  background-color: blue;
  float: left;
  margin-right: 5px;
}

.pb {
  width: 30px;
  height: 30px;
  background-color: green;
  float: left;
  margin-right: 5px;
}

.pc {
  width: 30px;
  height: 30px;
  background-color: pink;
  float: left;
  margin-right: 5px;
}

.pd {
  width: 30px;
  height: 30px;
  background-color: yellow;
  float: left;
  margin-right: 5px;
}

.pe {
  width: 30px;
  height: 30px;
  background-color: black;
  float: left;
  margin-right: 5px;
}

.pf {
  width: 30px;
  height: 30px;
  background-color: orange;
  float: left;
  margin-right: 5px;
}

JavaScript

$(document).ready(function() {
   var lastState;
   var lastStatei = '';
   $("body").on("click", ".item", function() {
         var dataid = $(this).attr("data-id");
         var REL = $(this).attr("rel");
         var map = {
            'na': 'pli',
            'nb': 'plo',
            'nc': 'phi',
            'nd': 'pwo',
            'ne': 'pwo',
            'nf': 'pc'
         };
         var dict = {
            'a': 'pa',
            'b': 'pb',
            'c': 'pc',
            'd': 'pd',
            'e': 'pe',
            'f': 'pf'
         };
         
         // The following codes need to work like this
         
         // When we clicked <div class="item" id="a1" data-id="1" rel="a">
         // then <div class="item" id="a1" data-id="1" rel="a"> need to be change like this
         // <div class="item" id="a1" data-id="1" rel="na">
         // and prepend will be come <div class="pa" id="pa1"></div>
         
         
         // Now we have <div class="item" id="a1" data-id="1" rel="na">
         // and this prepended div  <div class="pa" id="pa1"></div>
         
         // After if we click <div class="item" id="b1" data-id="1" rel="b">
         // The old one <div class="item" id="a1" data-id="1" rel="na"> will be change old one like
         // <div class="item" id="a1" data-id="1" rel="a">
         // and clicked <div class="item" id="b1" data-id="1" rel="b"> rel wil be change like
         // <div class="item" id="b1" data-id="1" rel="nb">
         
         
         // last old prepend  <div class="pa" id="pa1"></div> need to remove 
         // New prepend  <div class="pb" id="pb1"></div> need to come
         
         if (lastState) {
            // switch off
            if (dict[lastState]) {
               if ($('#sum' + dataid).text() == 0) {
                  $('#' + dict[lastState] + dataid).remove();
               }
            }
         }
         
         if (lastState === REL) {
            lastState = undefined;
      ...