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" style="width: 30%">Показатель</th>
		<th scope="col" style="width: 20%">Время исполнения*</th>
		<th scope="col"style="width: 20%">Стоимость за единицу</th>
		<th scope="col" style="width: 30%">Введите коичество анализов <sup style="color:#990000">макс. 50*</sup></th>
	</tr>
  </thead>
  <tbody>
	<tr>
		<td>Итоговая сумма: </td>
		<td></td>
		<td><input id="allresult" value="0"> ₽</td>
		<td></td>
	</tr>
	<tr class="table-info">
		<td>1,1,2,2-тетрахлорэтан</td>
		<td>1,5 часа</td>
		<td><input class="result result-1" id="num1" value=""></td>
		<td ><input class="colvo" id="col-1" value="0" type="number" min="0" max="50" step="1"> <input class="price price-1" value="1500"></td>
	</tr>
	<tr>
		<td>1,1,2-трихлорэтан</td>
		<td>1,5 часа</td>
		<td><input class="result result-2" id="num2" value=""></td>
		<td ><input class="colvo" id="col-2" value="0" type="number" min="0" max="50" step="1"> <input class="price price-2" value="1500"></td>
	</tr>
	<tr>
		<td>1,1-дихлорэтан</td>
		<td>1,5 часа</td>
		<td>1500</td>
		<td></td>
	</tr>
	<tr>
		<td>1,1-дихлорэтен</td>
		<td>1,5 часа</td>
		<td>1500</td>
		<td></td>
	</tr>
	<tr>
		<td>1,2-дихлорэтан</td>
		<td>1,5 часа</td>
		<td>1500</td>
		<td></td>
	</tr>
	<tr>
		<td>1-бутанол (н-бутиловый спирт)</td>
		<td>1 час</td>
		<td>1400</td>
		<td></td>
	</tr>
	<tr>
		<td>1-Пропанол (пропиловый спирт)</td>
		<td>1 час</td>
		<td>1400</td>
		<td></td>
	</tr>
	<tr>
		<td>2,4-ДДТ</td>
		<td>3,5...

CSS

input.result,
input.colvo {
  border: 0;
  text-align: center;
  background-color: rgba(255, 255 ,255, .15);
}
input.result {
  text-align: left;
  background-color: rgba(255, 255 ,255, 0);
}
input.price {
  display: none;
}
input.result,
input.price {
pointer-events:none;
}

JavaScript

$(document).ready(function(){
 $('#col-1').change(function(){  $('.result-1').val($('.price-1').val()*$(this).val()); 
    });  
 $('#col-2').change(function(){  $('.result-2').val($('.price-2').val()*$(this).val()); 
    });  
});