Calculator on input number - js

Сalculation of cost of analyzes

by Andrej Sharapov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="ttps://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table class="table table-hover">
  <thead class="thead-light">
	  <tr>
		<th scope="col">Показатель</th>
		<th scope="col">Стоимость анализов</th>
		<th scope="col" class="text-secondary">Количество анализов <sup><a href="#t--two" style="cursor: help;text-decoration: none;" class="text-danger" data-toggle="tooltip" data-placement="top" title="Максимальное количество проводимых анализов - 50">**</a></sup></th>
	</tr>
  </thead>
  <tdoby>
  	<tr>
  	<td></td>
  	<td></td>
  	<td></td>
  	</tr>
  	<tr>
		<td><b>ИТОГО</b></td>
		<td colspan="2"><input id="allresult-2" class="res" value="0"></td>
  	</tr>
  </tdoby>
	</table>
  
  <table class="table table-hover">
  <thead class="thead-light">
	<tr>
		<th scope="col" style="width: 30%">Показатель</th>
		<th scope="col" style="width: 20%">Время исполнения <sup><a href="#t--one" style="cursor: help;text-decoration: none;" class="text-danger" data-toggle="tooltip" data-placement="top" title="Ориентировочное время исполнения, с момента начала анализа, без учета времени оформления протокола"> *</a></sup></th>
		<th scope="col" style="width: 20%">Стоимость за единицу</th>
		<th scope="col" style="width: 30%" class="text-secondary">Количество анализов <sup>**</sup></th>
	</tr>
  </thead>
  <tbody>
	<tr class="table-danger text-secondary">
		<td>Итоговая стоиомость анализов (руб.)</td>
		<td></td>
		<td><input id="allresult" class="allresul" value="0"></td>
		<td class="cvo">Анализов выбрано ↓</td>
	</tr>
	<tr>
		<td>1,1,2,2-тетрахлорэтан</td>
		<td>1,5 часа</td>
		<td><input...

CSS

input.result,
input.colvo,
input.allresul,
input.res {
    border: 0;
    text-align: center;
    background-color: rgba(255, 255 ,255, .75);
}
input.result,
input.allresul,
input.res {
    text-align: left;
    background-color: rgba(255, 255 ,255, 0);
}
input.price {
    display: none;
}
input.result,
input.price,
input.cvo,
input#allresult,
input.res {
    pointer-events: none;
}
input.result {
    float: left;
}
input.cvo {
    border: 0;
    background: none;
}

JavaScript

$(document).ready(function(){
 	$('.colvo').on('input',function(){ 
        var par = $(this).parent().parent();
        var res = $('#allresult');
        var res2 = $('#allresult-2');
        par.find('.result').val(par.find('.price').val()*$(this).val());
        res.val(0);
        res2.val(0);
        $('.result').each(function(ind, el) {
             res.val(+res.val() + +el.value); 
             res2.val(+res2.val() + +el.value); 
          }); 
    	});  
	});