JSFiddle - React, Tailwind, and code Playground

by mosxe

HTML

<div class="body-main">
    <div class="block">
        <label>Ассортимент</label>
        <div class="elements">
            <label class="name">Чай - 13 руб.</label>
            <label class="count" name="countRange_0">Порций - 10</label>
            <button class="btn" data-id = 0 name="buy">Купить</button>
        </div>  
        <div class="elements">
            <label class="name">Кофе - 18 руб.</label>
            <label class="count" name="countRange_1">Порций - 20</label>
            <button class="btn"data-id = 1 name="buy">Купить</button>
        </div> 
        <div class="elements">
            <label class="name">Кофе с молоком - 21 руб.</label>
            <label class="count" name="countRange_2">Порций - 20</label>
            <button class="btn" data-id = 2 name="buy">Купить</button>
        </div> 
        <div class="elements">
            <label class="name">Сок - 35 руб.</label>
            <label class="count" name="countRange_3">Порций - 15</label>
            <button class="btn" data-id = 3 name="buy">Купить</button>
        </div> 
    </div>
    <div class="block">
         <label style="position:left">Кошелек VM </label>
        <label  style="position:right">Монетоприемник </label>
        <div class="elements">
            <label class="nameUser">1 рубль</label>
            <label class="count" name="countVM_0">100 штук</label>
            <button class="btn btn_put" name="giveMoney"  data-id = 0>Внести</button>
        </div>  
        <div class="elements">
            <label class="nameUser">2 рубля</label>
            <label class="count" name="countVM_1">100 штук</label>
            <button class="btn btn_put" name="giveMoney" data-id = 1>Внести</button>
        </div> 
        <div class="elements">
            <label class="nameUser">5 рублей</label>
            <label class="count" name="countVM_2">100 штук</label>
            <button class="btn btn_put" name="giveMoney" data-id = 2>Внести</button>
        </div> 
       ...

CSS

.body-main {
  border: 1px solid;
  margin: 10px;
  /*width: 80%;*/
  display: inline-block;
  box-shadow: 0 0 5px 2px rgba(0,0,0,0.8);
}


.block {
  display: inline-block;
  padding: 10px;
  background-color: #e0e0d1;
}

.block-dop {
  display: inline-block;
  background-color: #e0e0d1;
    position: absolute;
    margin: -125px 0 0 5px;
    top: 30%;
}

.elements {
  margin: 10px 0 20px 0;
}

.elements_test {
    display: flex;
    flex-flow: column wrap;
    background: none;
}
.name {
    padding: 8px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    color: #000;
    text-align: center;
    white-space: nowrap;
    background-color: red;
    border-radius: 6px 0 0 6px;
    display:inline-block;
    width: 170px
}

.count {
    padding: 8px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    color: #000;
    text-align: center;
    white-space: nowrap;
    background-color: grey;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    margin-left:-4px;
    display:inline-block;
    width: 100px
}

.nameUser {
    padding: 8px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    color: #000;
    text-align: center;
    white-space: nowrap;
    background-color: #b3b3ff;
    border-radius: 6px 0 0 6px;
    display:inline-block;
    width: 80px
}
.btn {
  -webkit-border-radius: 18;
  -moz-border-radius: 18;
  border-radius: 20px;
  -webkit-box-shadow: 1px 2px 3px #42ed28;
  -moz-box-shadow: 1px 2px 3px #42ed28;
  box-shadow: 1px 2px 3px #42ed28;
  color: #000000;
  font-size: 14px;
  background: #20cf10;
  text-decoration: none;
  outline:none;
  border:none;
  font-weight: 30px;
}

.btn:hover {
  background: #46bd0b;
  text-decoration: none;
}
.btn_put {
    background: #3366ff;
    box-shadow: 1px 2px 3px #3366ff;
}
.btn_put:hover {
    background: #0040ff;
}

.btn_buy {
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(153, 153, 153, 0.8), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0...

JavaScript

let walletUser = [  { id: '1', name: "1 рубль", sum: 1, count: 10},
                        { id: '2', name: "2 рубля", sum: 2, count: 30},
                        { id: '3', name: "5 рублей", sum: 5, count: 20},
                        { id: '4', name: "10 рублей", sum: 10, count: 15} ],
        
        assortmentVM = [ { id: 1, name: "Чай", sum: 13 , count: 10},
                         { id: 2, name: "Кофе", sum: 18 , count: 20},
                         { id: 3, name: "Кофе с молоком", sum: 21 , count: 20},
                         { id: 4, name: "Сок", sum: 35 , count: 15} ],
        
        walletVM = [ { id: 1, name: "1 рубль", sum: 1, count: 100},
                     { id: 2, name: "2 рубля", sum: 2, count: 100},
                     { id: 3, name: "5 рублей", sum: 5, count: 100},
                     { id: 4, name: "10 рублей", sum: 10, count: 100} ],

        summa = 0;
    
    const $deposit = $('#deposit');    

    giveMoneyVM ();
    buy ();
    deliveryMoney();
    
    //Внесение суммы в монетоприемник
    function giveMoneyVM () {
        
        $('button[name="giveMoney"]').on("click", function() {
     
            let id = $(this).data('id');

            if ( walletUser[id].count == 0 ) {

                alert (`Недостаточно средств данной купюры: ${walletUser[id].name}`);
                return;
            } 
            
            else {
                walletUser[id].count -= 1;
                walletVM[id].count +=1;
                summa += walletVM[id].sum;
                $(`label[name="countUser_${id}"`).text(`${walletUser[id].count} штук`);
                $(`label[name="countVM_${id}"`).text(`${walletVM[id].count} штук`);
                $deposit.text(`Внесенная сумма: ${summa} руб.`);
            }
        });
    }
    
    //Покупка в VM
    function buy () {
        
        $('button[name="buy"]').on("click", function() {   
            
            let id = $(this).data('id');

            if ( summa >=...