JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="test" id="radio-choice-1" value="3">Test1</input>
<br>
<input type="radio" name="test" id="radio-choice-2" value="4">Test2</input>
<br>
<input type="radio" name="test" id="radio-choice-3" value="5">Test3</input>

JavaScript

// try to set the attribute directly
$("#radio-choice-1").attr('data-icon','radio-on');
$("#radio-choice-2").attr('data-icon','radio-off');
$("#radio-choice-3").attr('data-icon','radio-off');

// try to set via click event
$("#radio-choice-2").click();

// try to set via changing attribute and call change event to update
$("#radio-choice-2").attr('checked','checked').change();

// try to set via reset checked element and changing attribute
$("input[name='test']:checked").removeAttr('checked');
$("input[name='test'][value='3']").attr('checked',true).change();
$("input[name='test'][value='3']").attr('checked','checked').change();