Radio click event not working with checkboxes with same class name

Question

I have a checkbox like so with the class name anotherCheese, When someone clicks on that it will append to the steps-row-first class, what is being appended also has a radio button with the class name anotherCheese, but my click event does not get called on the new radio button with the class name anotherCheese, what am I doing wrong?

Here is the HTML

<div class="steps-row-first">
<div class="radio-wrapper">
              <div class="radio-group">
                <input type="radio" class="anotherCheese" name="anotherCheese" value="yes" />
                <label>Yes</label>
              </div>
              <div class="radio-group">
                <input type="radio" name="anotherCheese" value="no" />
                <label>No</label>
              </div>
            </div>
</div>

And the jQuery:

$('.anotherCheese').on("click", function(){
    if($(this).val() == 'yes')
    {
      $(".steps-row-first").append('<div class="radio-wrapper"> <div class="radio-group"> <input type="radio" class="anotherCheese" name="anotherCheese" value="yes"/> <label>Yes</label> </div><div class="radio-group"> <input type="radio" name="anotherCheese" value="no"/> <label>No</label> </div></div>');
    }
  });

Answer 1

you didn't start with a ' you started with a ‘ in jquery fixed code

$('.anotherCheese').on("click", function(){
    if($(this).val() == 'yes')
    {
      $(".steps-row-first").append('<div class="radio-wrapper"> 
<div class="radio-group"> <input type="radio" 
class="anotherCheese" name="anotherCheese" value="yes"/> 
<label>Yes</label> </div><div class="radio-group"> <input 
type="radio" name="anotherCheese" value="no"/> 
<label>No</label> </div></div>');
    }
  });