I'm looking to dynamically append a div containing helper text inside each label of a radio button group, within its wrapper div.
Since my radio button group code is generated dynamically, adding static helper text to labels using HTML isn't an option for me.
My approach involves placing a div under each radio group div, adding a div with helper text, wrapping each radio group in another div, and then using append. Using classes, I add the helper text div only to its corresponding labels.
Screen before: Before
Screen after: After
// Example structure
<div class="helperTextWrapper">
<div class="radioTable">
<div>
<span>
<label class="RadioButtonHelperText1">Yes</label>
</span>
</div>
...
</div>
<div class="RadioButtonHelperTextLabel1">Yes helper text</div>
...
</div>
I aim to append the "Yes" helper text into the "Yes" label using jQuery, but my script keeps adding multiple/duplicate divs:
$("div.helperTextWrapper").each(function(index) {
$(this).find('.RadioButtonHelperTextLabel1').appendTo('.RadioButtonHelperText1');
$(this).find('.RadioButtonHelperTextLabel2').appendTo('.RadioButtonHelperText2');
...
});
// Updated structure with appended helper text
<div class="helperTextWrapper">
<div class="radioTable">
<div>
<span>
<label class="RadioButtonHelperText1">Yes
<div class="RadioButtonHelperTextLabel1">Yes helper text</div>
</label>
</span>
</div>
...
</div>