JSFiddle - React, Tailwind, and code Playground

by k_rma

HTML

<form class="refine" role="form">
  <input type="radio" value="left" name="left" id="reflatleft">Left
  <input type="radio" value="right" name="right" id="reflatright">Right
  <input type="radio" value="unspecified" name="unspecified" id="reflatunspecifed">Unspecified
 </form>    	    	  		 	

      <ul class="mylist">
	<li>item misc header
		<ul>
			<li>item left</li>
			<li>item right</li>
			<li>item left</li>
			<li>item unspecified</li>
			<li>item somethings else</li>
		</ul>
	</li>
	<li>item left</li>
	<li>item right</li>
	<li>item left</li>
	<li>item unspecified</li>
	<li>item somethings else</li>
</ul>

CSS

.here {
    color: #666;
	font-weight: bold;
}

.here ul {
    color:#000;
    font-weight:normal;
}

JavaScript

$('.refine').on('change', 'input[type="radio"]', function() {
			
    var sortattr = $(this).val();	
	
			$(".mylist li:contains('" + sortattr + "')").each(function() {
                $(this).addClass('here');
			});
	});