JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset class="rating">
  <h2>Rate the videos</h2>
  <input type="radio" id="star5" name="rating" value="5" />
  <label for="star5" title="Rocks!">5 stars</label>
  <input type="radio" id="star4" name="rating" value="4" />
  <label for="star4" title="Pretty good">4 stars</label>
  <input type="radio" id="star3" name="rating" value="3" />
  <label for="star3" title="Meh">3 stars</label>
  <input type="radio" id="star2" name="rating" value="2" />
  <label for="star2" title="Kinda bad">2 stars</label>
  <input type="radio" id="star1" name="rating" value="1" />
  <label for="star1" title="Sucks big time">1 star</label>
</fieldset>

CSS

fieldset {
      outline: none;
      border: none;
    }
    
    .rating {
      float: left;
    }
    /* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
    
    .rating:not(:checked) > input {
      position: absolute;
      top: -9999px;
      clip: rect(0, 0, 0, 0);
    }
    
    .rating:not(:checked) > label {
      float: right;
      width: 1em;
      padding: 0 .1em;
      overflow: hidden;
      white-space: nowrap;
      cursor: pointer;
      font-size: 200%;
      line-height: 1.2;
      color: #ddd;
      text-shadow: 1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0, 0, 0, .5);
    }
    
    .rating:not(:checked) > label:before {
      content: '★ ';
    }
    
    .rating > input:checked ~ label {
      color: #f70;
      text-shadow: 1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0, 0, 0, .5);
    }
    
    .rating:not(:checked) > label:hover,
    .rating:not(:checked) > label:hover ~ label {
      color: gold;
      text-shadow: 1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
    }
    
    .rating > input:checked + label:hover,
    .rating > input:checked + label:hover ~ label,
    .rating > input:checked ~ label:hover,
    .rating > input:checked ~ label:hover ~ label,
    .rating > label:hover ~ input:checked ~ label {
      color: #ea0;
      text-shadow: 1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
    }
    
    .rating > label:active {
      position: relative;
      top: 2px;
      left: 2px;
    }

JavaScript

$('.rating input[name="rating"]').on('click', function() {
  var n = $('.rating input[name="rating"]:checked').val();
  alert(n);
  if (n <= 3) {
    $('fieldset').append("<div class='newbox'>Question1</div>");
  } else {
    $('fieldset').append("<div class='newbox'>Question2</div>");
  }
});