JSFiddle - React, Tailwind, and code Playground

by Yuri Andrianov

HTML

<form name="flower" class="flower-set" data-container="flower">
	<fieldset class="flower" data-id="1">
		<header class="flower-title">Хризантема</header>
		<div class="flower-action">
			<span class="flower-text">Цена цветка:</span>
			<span class="flower-price" data-base="50" data-delta="5"></span>
			<input name="length" type="range" min="40" max="150" step="10" value="70" class="flower-length-value" data-length="value">
			<span class="flower-length-text" data-length="text"></span>
			<input name="count" type="number" min="1" value="3" class="flower-count" data-count="value">
			<span class="flower-text">Всего:</span>
			<span class="flower-sum" data-sum="text"></span>
			<span class="flower-buy" data-buy="values"></span>
		</div>
	</fieldset>
	<fieldset class="flower" data-id="2">
		<header class="flower-title">Незабудка</header>
		<div class="flower-action">
			<span class="flower-text">Цена цветка:</span>
			<span class="flower-price" data-base="70" data-delta="5"></span>
			<input name="length" type="range" min="50" max="120" step="10" value="90" class="flower-length-value" data-length="value">
			<span class="flower-length-text" data-length="text"></span>
			<input name="count" type="number" min="1" value="7" class="flower-count" data-count="value">
			<span class="flower-text">Всего:</span>
			<span class="flower-sum" data-sum="text"></span>
			<span class="flower-buy" data-buy="values"></span>
		</div>
	</fieldset>
</form>

JavaScript

$(function () {
	var flowers = {};

	$('[data-container="flower"] [data-id]').each(function () {
		var container = $(this),
			id = container.data('id'),
			length = $('[data-length="value"]', container),
			price = $('[data-base]', container);

		flowers[id] = {
			elems: {
				length: length,
				price: price,
				count: $('[data-count="value"]', container),
				sum: $('[data-sum="text"]', container)
			},
			values: {
				basePrice: parseInt(price.data('base')),
				delta: parseInt(price.data('delta')),
				baseLength: parseInt(length.attr('min')),
				step: parseInt(length.attr('step'))
			},
			buy: []
		};
		check(id);
	});
	$(document).on('change', '[data-length="value"],[data-count="value"]', function () {
		check($(this).closest('[data-id]').data('id'));
	});

	function check (id) {
		var flower = flowers[id],
			length = parseInt(flower.elems.length.val()),
			count = parseInt(flower.elems.count.val()),
			price = flower.values.basePrice + flower.values.delta * (length - flower.values.baseLength) / flower.values.step;

		flower.elems.length.next('[data-length="text"]').text(length);
		flower.elems.price.text(price);
		flower.elems.sum.text(count * price);
	}
});