JSFiddle - React, Tailwind, and code Playground

by max3w

HTML

<fieldset class="scheduler-border">
  <legend class="scheduler-border">Правая стена ВхШ</legend>

  <div class="form-group pnw11"><input class="wpcf7-form-control wpcf7-text input_change form-control" id="p11" name="pnw11" type="text" value="1" aria-invalid="false"></div>
  <div class="form-group pnh12"><input class="wpcf7-form-control wpcf7-text input_change form-control" id="p12" name="pnh12" type="text" value="2" aria-invalid="false"></div>
</fieldset>
<fieldset class="scheduler-border">
  <legend class="scheduler-border">Левая стена ВхШ</legend>
  <div class="form-group pnw21"><input class="wpcf7-form-control wpcf7-text form-control" id="p21" name="pnw21" type="text" value="1" aria-invalid="false"></div>
  <div class="form-group pnh22"><input class="wpcf7-form-control wpcf7-text form-control" id="p22" name="pnh22" type="text" value="3" aria-invalid="false"></div>
</fieldset>


<tbody>
    <tr>
      <td>Крыша балкона - лоджии <div class="form-group plm1"><select class="wpcf7-form-control wpcf7-select form-control" id="plm1" name="plm1" aria-invalid="false"><option value="0" selected="">---</option><option value="600">Профнастил</option><option value="800">Металочерепица</option></select></div></td>
      <td><div class="form-group e1"><input class="wpcf7-form-control wpcf7-text input_value form-control" id="e1" name="e1" type="text" value="0" readonly="" aria-invalid="false"></div></td>
      <td><div class="form-group g1"><input class="wpcf7-form-control wpcf7-text form-control" id="g1" name="g1" type="text" value="0" readonly="" aria-invalid="false"></div></td>
      <td><div class="form-group h1"><input class="wpcf7-form-control wpcf7-text form-control" id="h1" name="h1" type="text" value="0" readonly="" aria-invalid="false"></div></td>
    </tr>
    <tr>
      <td>Обшивка балкона снаружи <div class="form-group plm2"><select class="wpcf7-form-control wpcf7-select form-control" id="plm2" name="plm2" aria-invalid="false"><option value="0"...

JavaScript

jQuery( ".form-group" ).on('load input change paste', function() {		
//Установка значений Цен
	var prise = (jQuery('#plm1 option:selected').val()); jQuery('#e1').val(parseInt(prise)); 
	var prise = (jQuery('#plm2 option:selected').val()); jQuery('#e2').val(parseInt(prise)); 
  });
    // Расчет площади ВхШ
	jQuery(".form-group").on('load input change paste', function(){		
	var p11 = jQuery('#p11').val();
	var p12 = jQuery('#p12').val();
	var p21 = jQuery('#p21').val();
	var p22 = jQuery('#p22').val();
	if((p11>0 && p12>0)) { jQuery('#g1').val(parseFloat(p11)*parseFloat(p12));} 
	if((p21>0 && p22>0)) { jQuery('#g2').val(parseFloat(p21)*parseFloat(p22));}
// Расчет Крыша балкона - лоджии
	var g1 = jQuery('#g1').val();
	var g2 = jQuery('#g2').val();
	jQuery('#g1').val(parseFloat(g1)+parseFloat(g2));
	var e1 = (jQuery('#plm1 option:selected').val());
	jQuery('#h1').val(parseFloat(g1)*parseFloat(e1));
 });
 
 jQuery('.form-group').trigger('input'); //Дописал