JSFiddle - React, Tailwind, and code Playground

by Dmitri Ganenco

HTML

<select name="item-select"  id="item-select">
<option value=''>Choose an item</option>
<option value="1|100|4.5" >item 1</option>
<option value="2|100|5.5" >item 2</option>
<option value="3|100|6.5" >item 3</option>
</select>

<select name="quantity"  id="quantity">
<option value=''>quantity</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>



<div>your price is <p style="display:inline-block" id="total">10</p> $</div>

JavaScript

const itemSelect = $('#item-select');
const quantitySelect = $('#quantity');

$('#item-select, #quantity').on('change', function(){
debugger;
	if(!itemSelect.val() || !quantitySelect.val()) {
		return;
	}
	
	let splitted = itemSelect.val().split('|');
	const result = Number(splitted[2]) * Number(quantitySelect.val()) + Number(splitted[1]);
	

	$('#total').text(res);
});