JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div>Cost per item <input id="item1" value="190"><div class="minus" onclick="minus('1');">-</div><div class="plus" onclick="plus('1');">+</div> Quantity <input id="count1" value="0"></div>

<div>Cost per item <input id="item2" value="390"><div class="minus" onclick="minus('2');">-</div><div class="plus" onclick="plus('2');">+</div> Quantity <input id="count2" value="0"></div>

<div>Cost per item <input id="item3" value="690"><div class="minus" onclick="minus('3');">-</div><div class="plus" onclick="plus('3');">+</div> Quantity <input id="count3" value="0"></div>

<div>Cost per item <input id="item4" value="1000"><div class="minus" onclick="minus('4');">-</div><div class="plus" onclick="plus('4');">+</div> Quantity <input id="count4" value="0"></div>

<div>Money <input id="cash" value="3000"></div>

<div id="test1">

</div>

CSS

.minus, .plus {display:inline-block;width:20px;height:20px;background-color:#dedede;margin:0 3px;cursor:pointer;text-align:center;}

JavaScript

function id(x) {var y = document.getElementById(x);return y;}

var cash = id('cash');
var total_cash = id('cash').value;

function plus(key) {
var item = id("item" + key);
var count = id("count" + key);
if (Number(cash.value) >= Number(item.value))
{cash.value = (cash.value - item.value);
count.value = (Number(count.value) + 1);
}

else {}

}

function minus(key) {
var item = id("item" + key);
var count = id("count" + key);

if (Number(cash.value) + Number(item.value) > Number(total_cash) || count.value == 0)
{}

else {

cash.value = (Number(cash.value) + Number(item.value));
count.value = (Number(count.value) - 1);

}

}