Рассчитать итоговую сумму в таблице - js

[madeas]

Всем привет! Нужна помощь в доработке калькулятора расчета услуг.
Основная задача - внедрить калькулятор в существующую таблицу с услугами компании. В нее входят два условия:

1. рассчитать стоимость на конкретную услугу
2. рассчитать итоговую сумму

С первой задачей более менее справился. Написал пока две строки, но, боюсь что код будет очень большим, если писать так для каждой. Возможно, кто-то знает способ попроще.
Вторую задачу, казалось бы тоже легкую, решить не могу. Буду признателен за помощь. Заранее спасибо.
Таблица на jsfiddle

Возможно, кому-то в дальнейшем тоже пригодится.

[Dilettante_Pro]

<style>
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;
}
</style>
<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"  value=""></td>
		<td ><input class="colvo"  value="0" type="number" min="0" max="50" step="1"> <input class="price" value="1500"></td>
	</tr>
	<tr>
		<td>1,1,2-трихлорэтан</td>
		<td>1,5 часа</td>
		<td><input class="result "  value=""></td>
		<td ><input class="colvo"  value="0" type="number" min="0" max="50" step="1"> <input class="price" value="1500"></td>
	</tr>
  </tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

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

[madeas]

Огромное спасибо!

[madeas]

Dilettante_Pro, а можно на основе этого скрипта вывести строки с выбранными услугами и их кол-вом в еще один отдельный блок? Я вывел еще один результат в отдельную табличку, но не знаю как вывести в ней появление строк с выбранными услугами.

[Dilettante_Pro]

Вы можете вписать что хотите куда хотите точно так же, как суммарный результат прописывается в <td><input id="allresult" value="0"> ₽</td>

Покажите полный макет с дополнительной таблицей и что у вас не получается.

[madeas]

Я не совсем то имел ввиду. Вот сама табличка https://jsfiddle.net/madeas/evbLyrf3/53/
Наверх добавил еще одну, с текстом ИТОГО и пустой строкой (tr). Надо как-то сделать, чтобы в ней появлялись выбранные строки из первой таблицы. Т.е.:
1. Название (показатель)
2. Выбранное количество анализов
3. И общая стоимость напротив каждого анализа, в зависимости от количества.
4. Итоговая сумма, которую я уже вывел.

Вот. Как вывести строки из одной таблицы с другую не знаю. Табличка 2 такая же как и 1, только убрал колонку времени.

[madeas]

а суммарный результат почему-то повторно не выводится, пришлось добавить новый id в таблице. Он выходит только в одном, в другом остается ноль.

[Dilettante_Pro]

<style>
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,
.first  {
pointer-events:none;
}
</style>
<table class="first 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>
  <tbody>


  </tbody>
</table>
<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>
		<td>1,1,2,2-тетрахлорэтан</td>
		<td>1,5 часа</td>
		<td><input class="result"  value=""></td>
		<td ><input class="colvo"  value="0" type="number" min="0" max="50" step="1"> <input class="price" value="1500"></td>
	</tr>
	<tr>
		<td>1,1,2-трихлорэтан</td>
		<td>1,5 часа</td>
		<td><input class="result "  value=""></td>
		<td ><input class="colvo"  value="0" type="number" min="0" max="50" step="1"> <input class="price" value="1500"></td>
	</tr>
  </tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
 $('.colvo').on('input',function(){
        var targetTable = $('table.first tbody');
        targetTable.html('');  
        var par = $(this).parent().parent(),
             res = $('#allresult');
        par.find('.result').val(par.find('.price').val()*$(this).val());
        res.val(0);
        $('.result').each(function(ind, el) {          
             var p = $(el).parent().parent();
             res.val(+res.val() + +el.value);
             if(+el.value > 0) {
                $(el).parent().parent().clone().appendTo(targetTable);
             }
          });
          res.parent().parent().clone().appendTo(targetTable);
     });  
});
</script>

[madeas]

Dilettante_Pro, еще раз, огромное спасибо!