JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="price-list">
<li>
<input type="radio" name="radio" id="product1" data-price="100" value="product1" checked="checked">
<label for="product1"><span>Product 1</span></label>
</li>
<li><input type="radio" name="radio" id="product2" data-price="110" value="product2"><label for="product2"><span>Product 2 [+ 10 $]</span></label></li>
<li><input type="radio" name="radio" id="product3" data-price="110" value="product3"><label for="product3"><span>Product 3 [+ 23 $]</span></label></li>
</ul>
<ul class="price-list">
<li>
<input type="radio" name="radio2" id="product4" data-price="100" value="product4" checked="checked">
<label for="product1"><span>Product 1</span></label>
</li>
<li><input type="radio" name="radio2" id="product5" data-price="110" value="product5"><label for="product2"><span>Product 5 [+ 15 $]</span></label></li>
<li><input type="radio" name="radio2" id="product6" data-price="120" value="product6"><label for="product3"><span>Product 6 [+ 25 $]</span></label></li>
</ul>
JavaScript
$(function() {
$('.price-list input[type=radio]').change(function() {
var _radioObj = $(this);
var _currentPrice = _radioObj.attr('data-price'); // or .data('price');
$.each(_radioObj.closest('ul.price-list').find('input[type=radio]'), function() {
var _span = $(this).parent('li').find('span');
var _count = parseFloat($(this).attr('data-price')) - parseFloat(_currentPrice);
_count = _count > 0 ? '+ ' + _count : _count.toString().replace('-', '- ');
var _newContent;
if(_count == 0)
{
if(_span.html().indexOf('[') > 0)
_span.html(_span.html().substring(0, _span.html().indexOf('[') - 1));
else
_span.html(_span.html());
} else {
if(_span.html().indexOf('[') > 0)
_span.html(_span.html().substring(0, _span.html().indexOf('[') - 1) + ' [' + _count + ' $]');
else
_span.html(_span.html() + ' [' + _count + ' $]');
}
});
});
});