Untitled

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Car Payment</title>
</head>
<body>

<label for="hamzah">Hamzah : </label><input type="checkbox" id="hamzah">
<br>
<label for="ammar">Ammar : </label><input type="checkbox" id="ammar">
<br>
<label for="khalil">Khalil : </label><input type="checkbox" id="khalil">
<br>
<button onclick="Calc()">Calculate</button>
<br>
<label for="hamzahP">Hamzah Payment : </label><input type="text" value="0" id="hamzahP"><button onclick="paid('hamzah')"> Paid </button>
<br>
<label for="ammarP">Ammar Payment : </label><input type="text" value="0" id="ammarP"><button onclick="paid('ammar')"> Paid </button>
<br>
<label for="khalilP">Khalil Payment : </label><input type="text" value="0" id="khalilP"><button onclick="paid('khalil')"> Paid </button>
<br>
<label for="aboodP">abood Payment : </label><input type="text" value="0" id="aboodP"><button onclick="paid('abood')"> Paid </button>

<script>
    function Calc(){
        riding = 2;
        if(document.getElementById('hamzah').checked)
            riding++;
        if(document.getElementById('ammar').checked)
            riding++;
        if(document.getElementById('khalil').checked)
            riding++;
        money = 160 / riding;
        if(document.getElementById('hamzah').checked){
            if(localStorage.getItem('hamzah') == 0 )
            localStorage.setItem('hamzah',money)
            else
                localStorage.setItem('hamzah',parseFloat(localStorage.getItem('hamzah'))+ money)
            document.getElementById('hamzahP').value = localStorage.getItem('hamzah');
        }
        if(document.getElementById('ammar').checked){

            if(localStorage.getItem('ammar') == 0 )
                localStorage.setItem('ammar',money)
            else
                localStorage.setItem('ammar',parseFloat(localStorage.getItem('ammar'))+ money)
            document.getElementById('ammarP').value = localStorage.getItem('ammar');
        }
        if(document.getElementById('khalil').checked){

            if(localStorage.getItem('khalil') == 0 )
                localStorage.setItem('khalil',money)
            else
                localStorage.setItem('khalil',parseFloat(localStorage.getItem('khalil'))+ money)
            document.getElementById('khalilP').value = localStorage.getItem('khalil');
        }

        if(localStorage.getItem('abood') == 0 )
            localStorage.setItem('abood',money)
        else
            localStorage.setItem('abood',parseFloat(localStorage.getItem('abood'))+ money)
        document.getElementById('aboodP').value = localStorage.getItem('abood');

    }
function paid(payer){
        localStorage.setItem(payer,0);
        document.getElementById(payer+'P').value = 0;
}
function store(){
    document.getElementById('hamzahP').value = localStorage.getItem('hamzah');
    document.getElementById('ammarP').value = localStorage.getItem('ammar');
    document.getElementById('khalilP').value = localStorage.getItem('khalil');
    document.getElementById('aboodP').value = localStorage.getItem('abood');
}
store();
</script>


</body>
</html>