JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<section class="landing-block g-pt-50 g-pb-50">
    <div class="container">
        <div class="row">
            <div class="col-md-6 g-pb-20 g-pb-0--md">
                <img class="landing-block-node-img js-animation slideInLeft img-fluid" src="/upload/landing/6cf/6cf110c505ee53374aed4f8375e77183.png" alt="Image description" data-fileid="20" style="animation-duration: 1000ms; animation-play-state: running; animation-name: none;">
            </div>
            <div class="landing-block-node-text-container js-animation slideInRight col-md-6" style="animation-duration: 1000ms; animation-play-state: running; animation-name: none;">
                <h2 class="landing-block-node-title text-uppercase g-font-weight-700 g-font-size-26 mb-0 g-mb-15">КРАН МОСТОВОЙ ЭЛЕКТРИЧЕСКИЙ ОДНОБАЛОЧНЫЙ ОПОРНЫЙ</h2>
                <div class="landing-block-node-text g-color-gray-dark-v4">
                    <p>Рассчитайте стоимость крана мостового однобалочного в стандартной комплектации.
                        <br>
                        <br>ВЫБЕРИТЕ ГРУЗОПОДЪЕМНОСТЬ, В ТОННАХ
                        <br>
						<input type='button' data-group="boldStuff2"  id='userInput1' value='0,5' />
						<input type='button' data-group="boldStuff2" id='userInput2' value='1,0' />
						<input type='button' data-group="boldStuff2" id='userInput3' value='2,0' />
						<input type='button' data-group="boldStuff2" id='userInput4' value='3,2' />
						<input type='button' data-group="boldStuff2" id='userInput5' value='5,0' />
						<input type='button' data-group="boldStuff2" id='userInput6' value='10,0' />
                        <br><br>
                       ВЫБЕРИТЕ ПРОЛЕТ КРАНА В МЕТРАХ<br>
					   	<input type='button' data-group="prolet" id='prolet1' value='10,5' />
						<input type='button' data-group="prolet" id='prolet2' value='16,5' />
						<input type='button' data-group="prolet" id='prolet3' value='18,5' />
						<input type='button' data-group="prolet" id='prolet4' value='22,5'...

JavaScript

/**
 * для вопроса https://toster.ru/q/550604
 */

var state = {
  gruz: null,
  prolet: null,
};

const $out = $('#e-out-price');

$("input:button").click(function(){
  const v = $(this).attr('value');
  const group = $(this).data('group');
  if( group === 'boldStuff2') {
    state.gruz = v;
  } else if( group === 'prolet') {
    state.prolet = v;
  }
  
  if( state.gruz && state.prolet) {
    $out.html( '' + state.gruz + '&times;' + state.prolet + ' руб.');
  }
});