Apply a font-awesome icon to toggled button

Question

I would like to prepend a Font Awesome ( <i class="fas fa-check-circle text-white"></i> ) Check icon to the current toggled button in bootstrap.

I have two buttons, No or Yes.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
 <label class="btn btn-dark active">
  <input type="radio" name="options" id="option1" autocomplete="off" checked> No
 </label>
 <label class="btn btn-success">
  <input type="radio" name="options" id="option2" autocomplete="off"> Yes
 </label>
</div>

When 'No' or 'Yes' is clicked I'd like to prepend the icon like this:

<input type="radio" name="options" id="option2" autocomplete="off"><i class="fas fa-check-circle text-white"></i> Yes

--

The main issue is that I will have 10+ of these "groups of buttons" and I can't find an efficent way to do what I need. jQuery is preferred but not necessary.

Answer 1

I've actually just found a simple way to achieve this. Leaving this post up incase others are looking for something similar.

Here is an example with multiple button groups.

<div class="btn-group btn-group-toggle j_group" data-toggle="buttons">
  <label class="btn btn-secondary active j_btn">
  <input type="radio" name="options" autocomplete="off" checked> <span class="j_label">No</span>
  </label>
  <label class="btn btn-success j_btn">
    <input type="radio" name="options" autocomplete="off"> <span class="j_label">Yes</span>
  </label>
</div>

<div class="btn-group btn-group-toggle j_group" data-toggle="buttons">
  <label class="btn btn-secondary active j_btn">
  <input type="radio" name="options2" autocomplete="off" checked> <span class="j_label">No</span>
  </label>
  <label class="btn btn-success j_btn">
    <input type="radio" name="options2" autocomplete="off"> <span class="j_label">Yes</span>
  </label>
</div>

<script>
$(document).on("click", ".j_btn", function() {
  btnClicked=this;
  $(btnClicked).parent().find('.j_icon').remove();
  btnOrigialLabel=$(btnClicked).find('.j_label').html();
  $(btnClicked).find('.j_label').html('<i class="fas fa-check-circle j_icon"></i> ' + btnOrigialLabel);
});
</script>