JSFiddle - React, Tailwind, and code Playground
HTML
<div class="added">
<div class="column-left">
<ul class="options-list">
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio">
English
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio" >
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" data-toggle="radio">
German
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio" >
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" data-toggle="radio">
Japanese
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio" >
<input type="radio" name="optionsRadios" id="optionsRadios4" value="option4" data-toggle="radio">
Russian
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio" >
<input type="radio" name="optionsRadios" id="optionsRadios5" value="option5" data-toggle="radio">
Other
</label>
</li>
</ul>
</div>
<div class="column-center">
<ul class="options-list">
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios"...
CSS
ul.options-list {
margin: 0;
display: block;
list-style: none;
font-family: Arial;
padding-left: 110px;
text-align: left;
width: 215px;
}
ul.options-list li {
position: relative;
padding: 17px 17px;
background-color: #F6F6F6;
color: #2a4753;
/* cursor: pointer;*/
max-height: 150px;
overflow: hidden;
border: 1px solid #DDDDDD;
border-radius: 8px;
margin-bottom: 16px;
margin-top: 15px;
}
ul.options-list li.sel_bk_color{
background-color: red;
}
JavaScript
$(document).ready(function() {
$("ul.options-list li").on("click",function() {
if($(this).find('input[type="radio"]').is(':checked')) {
$('ul.options-list li').removeClass('sel_bk_color');
$(this).addClass('sel_bk_color');
}
});
});