JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rowclock">
    <p>asfdjsanfjkdsajkfsdkjfjksdfj dfjdshfjsdjfhjsdhfjkshdjfsdf sdakjflkdsjfklsdjkfjklsdf</p>
    <li class="variant"><p class="checkbox"><input id="product_1" name="variant" value="1" type="radio" class="variant_radiobutton" checked /><label class="variant_name" for="product_1">Белый</label><span class="price">44 000 <span class="currency">руб</span></span></p></li>
    
    <li class="variant"><p class="checkbox"><input id="product_2" name="variant" value="2" type="radio" class="variant_radiobutton"  /><label class="variant_name" for="product_2">Черный</label> <span class="price">42 000 <span class="currency">руб</span></span></p></li>
</div>
<div class="rowclick" id="rowclock">
  <ul>
    <li><input type="radio" value="yes" checked /><label>row 1</label>
    </li>    
    <li>
      <input type="radio" value="yes" /><label>row 1</label>
    </li>    
    <li>
      <input type="radio" value="yes" /><label>row 1</label>
    </li>
  </ul>
</div>

CSS

div {
    height: 150px;
    background: yellow;
}

.red {
    background: red;
}

.blue {
    background: blue;
}
.selected td {
background-color: #48507B;
color: white;
}
.rowclick td {
padding: 4px;
border: 1px solid #999;
}

JavaScript

$(document).ready(function() {
  $('#rowclock tr')
    .filter(':has(:radio:checked)')
    .addClass('selected')
    .end()
  .click(function(event) {
    if (event.target.type !== 'radio') {
      $(':radio', this).trigger('click');
    }
  })
    .find(':radio')
    .click(function(event) {
      $(this).parents('li:first').toggleClass('selected');
    });    
});