Выберите элемент, к которому он принадлежит

Question

В ".bar" есть переключатели. Я показываю выбранное значение входного радио в "div class = 'selected-item'". Значения имени должны быть одинаковыми. Выбор в каждом .bar, должен быть написан на ".selected-item" сам по себе. Когда я выбираю в первом «.bar», второе значение «.bar» также изменяется. Как я могу это исправить. Выбор .radio должен изменить значение .selected-item на панели .bar, в которой он находится.

$('.bar input[name="exa"]').on('change', function() {
	var selectedprice = $('.bar input[name=exa]:checked').val();
	$( ".selected-item b" ).text( selectedprice );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bar">
	<h2>This is first bar. class name "bar"</h2>
	<div class="selected-item">Selected İtem: <b>130</b></div>
	<label>
		<input type="radio" name="exa" value="130" />
		130
	</label>
	<label>
		<input type="radio" name="exa" value="140" />
		140
	</label>
	<label>
		<input type="radio" name="exa" value="150" />
		150
	</label>
	<label>
		<input type="radio" name="exa" value="160" />
		160
	</label>
</div>

<div class="bar">
	<h2>This is second bar. Class name "bar" again.</h2>
	<div class="selected-item">Selected İtem: <b>130</b></div>
	<label>
		<input type="radio" name="exa" value="150" />
		130
	</label>
	<label>
		<input type="radio" name="exa" value="140" />
		140
	</label>
	<label>
		<input type="radio" name="exa" value="150" />
		150
	</label>
	<label>
		<input type="radio" name="exa" value="160" />
		160
	</label>
</div>

Answer 1

Вы можете использовать jquery s closest, который go UP в DOM ищет селектор. Затем используйте FIND для поиска вниз DOM для соответствующих полей.

$('.bar input[name="exa"]').on('change', function() {
	var selectedprice = $(this).closest(".bar").find('input[name=exa]:checked').val();
	$(this).closest(".bar").find( ".selected-item b" ).text( selectedprice );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bar">
	<h2>This is first bar. class name "bar"</h2>
	<div class="selected-item">Selected İtem: <b>130</b></div>
	<label>
		<input type="radio" name="exa" value="130" />
		130
	</label>
	<label>
		<input type="radio" name="exa" value="140" />
		140
	</label>
	<label>
		<input type="radio" name="exa" value="150" />
		150
	</label>
	<label>
		<input type="radio" name="exa" value="160" />
		160
	</label>
</div>

<div class="bar">
	<h2>This is second bar. Class name "bar" again.</h2>
	<div class="selected-item">Selected İtem: <b>130</b></div>
	<label>
		<input type="radio" name="exa" value="130" />
		130
	</label>
	<label>
		<input type="radio" name="exa" value="140" />
		140
	</label>
	<label>
		<input type="radio" name="exa" value="150" />
		150
	</label>
	<label>
		<input type="radio" name="exa" value="160" />
		160
	</label>
</div>