sum all input numbers

sum all input numbers

by Adi Jaya

HTML

<ul class="demo">
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
  <li><input type="number" min="1"></li>
</ul>

<div id="result">
    <input readonly/>
</div>

CSS

.demo {
  list-style: none;
  padding: 0;
}

.demo input {
  width: 100px;
  display: inline-block;
  margin-bottom: 5px;
  padding: 5px 10px;
}

input:focus {
  background: yellow;
}

#result {
  position: fixed;
  bottom: 15px;
  right: 15px;
}

#result::before {
    content: "Result";
    position: absolute;
    top: -80%;
}

#result input {
  width: 100px;
  background: #2f2f2f;
  color: #fff;
  padding: 5px 10px;
}

JavaScript

$( ".demo input" ).on( "change keyup", function(){

    var sum = 0;
  
	$( ".demo input" ).each(function() {
		var value = $( this ).val();
        sum += Number( value );
    });

   $( "#result input" ).val( sum );
   
});