title: How to add star rating in grid view with html and css?
body: <p>I need to make a web page where students can rate teachers. On the web page I want to show cards dynamically which will contain name of the teacher and Star rating.
  From other posts in stack overflow I have managed to get dynamic cards and star ratings on the page.
  Now looking for help for 2 issues I am having.</p>
  <ol>
  <li>How I can move my stars in center of the card and stars be responsive to the size of the card?</li>
  <li>How I can have star radio buttons independent? Currently changing one changes value of other radio also.
  Please find my code below.</li>
  </ol>
  <p>Thanks!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
   //Prepare Element selectors
    var cssElem = $("#Dynam"), rowElem = $("#rows"), columnElem = $("#columns"), appElem = $("#app");
    var noItems = $(".item").length,defaultColumns = 4;
      
    //Init default state
    cssElem.html(".container .item {flex: 0 0 calc(" + (100 / defaultColumns) + "% - 1em);}");
    columnElem.val(defaultColumns);
    rowElem.val(Math.ceil(noItems / columnElem.val()));
  
    //Add listeners to change
    appElem.on("DOMSubtreeModified", function() {
      noItems = $(".item").length;
      rowElem.val(Math.ceil(noItems / columnElem.val()));
    });
    columnElem.on("change", function() {
      rowElem.val(Math.ceil(noItems / columnElem.val()));
      cssElem.html(".container .item {flex: 0 0 calc(" + (100 / columnElem.val()) + "% - 1em);}");
    });
    rowElem.on("change", function() {
      columnElem.val(Math.ceil(noItems / rowElem.val()));
      cssElem.html(".container .item {flex: 0 0 calc(" + (100 / columnElem.val()) + "% - 1em);}");
    });
  });
  
  const COLORS = ['#FE9', '#9AF', '#F9A', "#AFA", "#FA7"];
  
  function addItem(container, template) {
    let color = COLORS[_.random(COLORS.length - 1)];
    let num = _.random(10000);
    let count = num;
  
    container.append(Mustache.render(template, {
      color,
      num,
      count
    }));
  }
  
  $(() =&gt; {
    const tmpl = $('#item_template').html()
    const container = $('#app');
  
    for (let i = 0; i &lt; 5; i++) {
      addItem(container, tmpl);
    }
  
    $('#add_el').click(() =&gt; {
      addItem(container, tmpl);
    })
  
    container.on('click', '.del_el', (e) =&gt; {
      $(e.target).closest('.item').remove();
    });
  });
  
  $(document).ready(function(){
      // Check Radio-box
      $(".rating input:radio").attr("checked", false);
  
      $('.rating input').click(function () {
          $(".rating span").removeClass('checked');
          $(this).parent().addClass('checked');
      });
  
      $('input:radio').change(
        function(){
          var userRating = this.value;
          alert(userRating);
      }); 
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
  }
  
  .container .item {
    min-height: 120px;
    margin: 0.25em 0.5em;
    overflow: hidden;
    text-align:center
  }
  
  .rating {
      float:left;
      width:300px;
  }
  .rating span { float:right; position:relative; }
  .rating span input {
      position:absolute;
      top:0px;
      left:0px;
      opacity:0;
  }
  .rating span label {
      display:inline-block;
      width:30px;
      height:30px;
      text-align:center;
      color:#FFF;
      background:#ccc;
      font-size:30px;
      margin-right:2px;
      line-height:30px;
      border-radius:50%;
      -webkit-border-radius:50%;
  }
  .rating span:hover ~ span label,
  .rating span:hover label,
  .rating span.checked label,
  .rating span.checked ~ span label {
      background:#F90;
      color:#FFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;style id="Dynam"&gt;&lt;/style&gt;
  &lt;button id="add_el"&gt;Add element&lt;/button&gt; rows:
  &lt;input id="rows" /&gt; columns:&lt;input id="columns" /&gt;
  
  &lt;div id="app" class="container"&gt;
  &lt;/div&gt;
  
  &lt;template id="item_template"&gt;
    &lt;div class="item" style="background: {{color}}"&gt;
      &lt;p&gt;{{ num }}&lt;/p&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="rating"&gt;
      &lt;span&gt;&lt;input type="radio" name="raiting" id="str5" value="5"&gt;&lt;label for="str5"&gt;&lt;/label&gt;&lt;/span&gt;
      &lt;span&gt;&lt;input type="radio" name="raiting" id="str4" value="4"&gt;&lt;label for="str4"&gt;&lt;/label&gt;&lt;/span&gt;
      &lt;span&gt;&lt;input type="radio" name="raiting" id="str3" value="3"&gt;&lt;label for="str3"&gt;&lt;/label&gt;&lt;/span&gt;
      &lt;span&gt;&lt;input type="radio" name="raiting" id="str2" value="2"&gt;&lt;label for="str2"&gt;&lt;/label&gt;&lt;/span&gt;
      &lt;span&gt;&lt;input type="radio" name="raiting" id="str1" value="1"&gt;&lt;label for="str1"&gt;&lt;/label&gt;&lt;/span&gt;
  &lt;/div&gt;
      &lt;p&gt;
        &lt;button class="del_el"&gt;Delete&lt;/button&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>