JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<input type="radio" name="some-name" value="1" data-js-action="switch-type">
<input type="radio" name="some-name" value="2" data-js-action="switch-type">
<span data-js-name="some-name"></span>
</div>
<div>
<input type="radio" name="some-name-2" value="1" data-js-action="switch-type">
<input type="radio" name="some-name-2" value="2" data-js-action="switch-type">
<span data-js-name="some-name-2"></span>
</div>
CSS
div {
margin: 20px;
}
JavaScript
document.addEventListener('change', function(e) {
if (e.target.getAttribute('data-js-action') === 'switch-type') {
var output = document.querySelector('[data-js-name=' + e.target.name + ']');
output.textContent = e.target.value;
}
}, false);