<style>
    .legend {
        background-color: #eee;
        padding: 6px;
        padding-top: 4px;
        margin: 0px;
        border: 1px solid #b9b6b6;
        position: absolute;
        width: 35px;
        font-size: 13px;
        text-align: center;
    }

    .input {
        width: 90px;
        margin: 0px;
        padding: 6px;
        border: 1px solid #b9b6b6;
        float: left;
    }

    .container{
        width: 150px;
        height : 130px;
        overflow: hidden;
        float: left;
        margin : 2px;
    }

    .title{
        margin : 8px;
    }
    .butt {
height : 30px;
border-radius : 5px;
    }

    .butt-calc{
            background-color : #5bb75b;
            border : #376537;
            color : #fff;
            cursor: pointer;
    }

    .butt-calc:hover{
            background-color : #1d8a1d;

    }
</style>


<form id="form-calc" style="background-color : #eee; height : 460px; padding : 5px; width: 620px; padding-left : 15 px; " >

<div class="container">
<h5 class="title">SHA-256</h5>
        <div >
            <input type="text" class="input"  name="sha256HashRate" data-default="14000.00">
            <span class="legend">GH/s</span>
        </div>
<br><br>
        <div >
            <input type="text" class="input" name="sha256Power" data-default="1320.00">
            <span class="legend">Watts</span>
        </div>
<br>  <br>
        <div >
            <input type="text" class="input" name="sha256PowerCost" data-default="0.10">
            <span class="legend">$/kWh</span>
        </div>
</div>


<div class="container">
<h5 class="title">Scrypt</h5>
        <div >
            <input type="text" class="input" name="scryptHashRate" data-default="580000.00" >
            <span class="legend">GH/s</span>
        </div>
<br><br>
        <div >
            <input type="text" class="input" name="scryptPower" data-default="942.00">
            <span class="legend">Watts</span>
        </div>
<br>  <br>
        <div >
            <input type="text" class="input" name="scryptPowerCost" data-default="0.10">
            <span class="legend">$/kWh</span>
        </div>
</div>


<div class="container">
<h5 class="title">X11</h5>
        <div >
            <input type="text" class="input" name="x11HashRate"   data-default="51000.00" >
            <span class="legend">GH/s</span>
        </div>
<br><br>
        <div >
            <input type="text" class="input" name="x11Power" data-default="2910.00">
            <span class="legend">Watts</span>
        </div>
<br>  <br>
        <div >
            <input type="text" class="input" name="x11PowerCost" data-default="0.10">
            <span class="legend">$/kWh</span>
        </div>
</div>


<div class="container">
<h5 class="title">Quark</h5>
        <div >
            <input type="text" class="input" name="quarkHashRate" data-default="450000.00">
            <span class="legend">GH/s</span>
        </div>
<br><br>
        <div >
            <input type="text" class="input" name="quarkPower"   data-default="75.00" >
            <span class="legend">Watts</span>
        </div>
<br>  <br>
        <div >
            <input type="text" class="input" name="quarkPowerCost" data-default="0.10">
            <span class="legend">$/kWh</span>
        </div>
</div>


<div class="container">
<h5 class="title">Groestl</h5>
        <div >
            <input type="text" class="input" name="groestlHashRate" data-default="45.00">
            <span class="legend">GH/s</span>
        </div>
<br><br>
        <div >
            <input type="text" class="input" name="groestlPower" data-default="825.00">
            <span class="legend">Watts</span>
        </div>
<br>  <br>
        <div >
            <input type="text" class="input" name="groestlPowerCost" data-default="0.10">
            <span class="legend">$/kWh</span>
        </div>
</div>

<div class="container">
<h5 class="title">Blake-256 </h5>
        <div >
            <input type="text" class="input" name="blake256HashRate" data-default="11.20">
            <span class="legend">GH/s</span>
        </div>
<br><br>
        <div >
            <input type="text" class="input" name="blake256Power" data-default="600.00">
            <span class="legend">Watts</span>
        </div>
<br>  <br>
        <div >
            <input type="text" class="input" name="blake256PowerCost" data-default="0.10">
            <span class="legend">$/kWh</span>
        </div>
</div>


<div class="container">
<h5 class="title">NeoScrypt </h5>
        <div >
            <input type="text" class="input" name="neoscryptHashRate" data-default="400.00">
            <span class="legend">GH/s</span>
        </div>
<br><br>
        <div >
            <input type="text" class="input" name="neoscryptPower" data-default="400.00">
            <span class="legend">Watts</span>
        </div>
<br>  <br>
        <div >
            <input type="text" class="input" name="neoscryptPowerCost" data-default="0.10">
            <span class="legend">$/kWh</span>
        </div>
</div>

<div class="container">
<h5 class="title">Lyra2REv2 </h5>
        <div >
            <input type="text" class="input" name="lyra2rev2HashRate" data-default="30.00">
            <span class="legend">GH/s</span>
        </div>
<br><br>
        <div >
            <input type="text" class="input" name="lyra2rev2Power" data-default="600.00">
            <span class="legend">Watts</span>
        </div>
<br>  <br>
        <div >
            <input type="text" class="input" name="lyra2rev2PowerCost" data-default="0.10">
            <span class="legend">$/kWh</span>
        </div>
</div>

<div class="container">
<h5 class="title">CryptoNightV7</h5>
        <div >
            <input type="text" class="input" name="cryptonightv7HashRate" data-default="2800.00">
            <span class="legend">GH/s</span>
        </div>
<br><br>
        <div >
            <input type="text" class="input" name="cryptonightv7Power" data-default="600.00">
            <span class="legend">Watts</span>
        </div>
<br>  <br>
        <div >
            <input type="text" class="input" name="cryptonightv7PowerCost" data-default="0.10">
            <span class="legend">$/kWh</span>
        </div>
</div>

<div class="container">
<h5 class="title">EtHash</h5>
        <div >
            <input type="text" class="input" name="ethashHashRate" data-default="108.00">
            <span class="legend">GH/s</span>
        </div>
<br><br>
        <div >
            <input type="text" class="input" name="ethashPower" data-default="600.00">
            <span class="legend">Watts</span>
        </div>
<br>  <br>
        <div >
            <input type="text" class="input" name="ethashPowerCost" data-default="0.10">
            <span class="legend">$/kWh</span>
        </div>
</div>

<div class="container">
<h5 class="title">Equihash</h5>
        <div >
            <input type="text" class="input" name="equihashHashRate" data-default="1180.00">
            <span class="legend">GH/s</span>
        </div>
<br><br>
        <div >
            <input type="text" class="input" name="equihashPower" data-default="600.00">
            <span class="legend">Watts</span>
        </div>
<br>  <br>
        <div >
            <input type="text" class="input" name="equihashPowerCost" data-default="0.10" >
            <span class="legend">$/kWh</span>
        </div>
</div>

<div class="container">

</div>
<div class="container" style="width : 400px; margin-top : 20px; overflow : clear ;">

<span>BTC/USD</span>
<select >
<option>CEX.io</option>
<option>hitbtc</option>
<option>bitfinix</option>
<option>itBit</option>
<option>coinbase</option>
</select>

<button class="butt" id="reset"> Reset</button>
<button class="butt butt-calc">Calculate Profitability</button>


</div>

</form>

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<script>


$(function() {
    function reset (){
        $("input").each(function(index){
            $(this).val($(this).attr("data-default"))
    }
    )
    }

    function objectifyForm(formArray) {

var returnArray = {};
for (var i = 0; i < formArray.length; i++){
  returnArray[formArray[i]['name']] = formArray[i]['value'];
}
return returnArray;
}

    reset();
$("#reset").on("click",function(e){
    e.preventDefault();
   reset();

});


$(".butt-calc").on("click",function(e){
    e.preventDefault();
    console.log(objectifyForm($("#form-calc").serializeArray()));

});


});

</script>