JSFiddle - React, Tailwind, and code Playground

by Mojtaba Sabeti

HTML

<p><label for="card1"> کارت اول</label><input type="radio" name="radiobox" id="card1" value="1234:5000"></p>
<p><label for="card2"> کارت دوم</label><input type="radio" name="radiobox" id="card2" value="5678:10000"></p>

<input type="number" name="quantity" id="quantity" min="0">

<p>قیمت واحد : <span id="unit_price">0</span></p>
<p>قیمت کل : <span id="total">0</span></p>

JavaScript

$(function(){
	$('input[name="radiobox"]').change(function(){
		var card = $(this).val();
		var splitCard = card.split(':');
			splitCard = splitCard[1];
		$('#unit_price').text(splitCard);
		var total = $('#quantity').val() * splitCard;
		$('#total').text(total);
	});
	$('#quantity').keyup(function(){
		var quantity = $(this).val();
		var unit = $('#unit_price').text();
		var total = unit * quantity;
		$('#total').text(total);
	});
})