JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<DIV CLASS="box" STYLE="width:100%">
 <TABLE STYLE="width:100%">
  <TR><TH STYLE="width:220px">link</TH><TH STYLE="width:140px">your rating </TH><TH STYLE="width:140px">Timer</TH><TH/></TR>
  <TR><TD><A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">mylink</A></TD><TD><span class="star-rating">
  <input type="radio" name="rating" value="1" /><i></i>
  <input type="radio" name="rating" value="2" /><i></i>
  <input type="radio" name="rating" value="3" checked="checked" /><i></i>
  <input type="radio" name="rating" value="4" /><i></i>
  <input type="radio" name="rating" value="5" /><i></i>
</span></TD><TD><SPAN CLASS="timer" data-id="id1" data-minutes="1" data-secleft="0">Ready</SPAN></TD></TR>
  <TR><TD><A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">mylink</A></TD><TD><span class="star-rating">
  <input type="radio" name="rating" value="1" /><i></i>
  <input type="radio" name="rating" value="2" /><i></i>
  <input type="radio" name="rating" value="3" checked="checked" /><i></i>
  <input type="radio" name="rating" value="4" /><i></i>
  <input type="radio" name="rating" value="5" /><i></i>
</span></TD><TD><SPAN CLASS="timer" data-id="id2" data-minutes="1" data-secleft="0">Ready</SPAN></TD></TR>
</TABLE></DIV>

CSS

.star-rating {
    font-size: 0;
    white-space: nowrap;
    display: inline-block;
    width: 250px;
    height: 50px;
    overflow: hidden;
    position: relative;
    background:  url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
background-size: contain;}

.star-rating i {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20%;
    z-index: 1;
    background:  url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
background-size: contain;}

.star-rating input {
    -moz-appearance: none;
    -webkit-appearance: none;
    opacity: 0;
    display: inline-block;
    width: 20%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
    position: relative;
}

.star-rating input:hover + i,
.star-rating input:checked + i {
    opacity: 1;
}
.star-rating i ~ i {
    width: 40%;
}
.star-rating i ~ i ~ i {
    width: 60%;
}
.star-rating i ~ i ~ i ~ i {
    width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i {
    width: 100%;
}

.choice {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    display: block;
}

JavaScript

function secondsTimeSpanToHMS(s) {
 var h = Math.floor(s/3600);
 s -= h*3600;
 var m = Math.floor(s/60);
 s -= m*60;
 return h+":"+(m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s);
}
$(function() {
 $(".flink").click(function() {
  var timer = $(this).parent().parent().find('.timer');
  var id = timer.data('id');
  if(timer.data('secleft') <= 0) {
   timer.data('secleft', timer.data('minutes') * 60 + 20);
   $(this).parent().fadeTo(300,0.3);
  }
  // here you need to calculate the timestamp of the time you count down to and save it.
  // note that you'll have to save it per link!
  var now = (new Date()).getTime();
  var ts = now + (parseInt(timer.data('minutes')) * 60 + 20)*1000;
console.log(ts, now, ts-now);
  localStorage.setItem('timestamp_' + id, ts);
 });
 var lasttime = Math.round($.now() / 1000);
 var curtime = Math.round($.now() / 1000);
 function timer(){
  curtime = Math.round($.now() / 1000);
  $(".timer").each(function(){
   if($(this).data('secleft') > 0) {
    $(this).data('secleft', $(this).data('secleft') - (curtime - lasttime));
    $(this).text(secondsTimeSpanToHMS($(this).data('secleft')));
   } else {
    if($(this).text()!=$("#language").data('ready')) {
     $(this).text($("#language").data('ready'));
     
    }
   }
  });
  lasttime = curtime;
  setTimeout(timer, 1000);
 }

  // when loading the page check if for any .flink we already
  // saved a timer before the refresh:
  $(".timer").each(function(){
    var timer = $(this);
    var id = timer.data('id');
    var ts = localStorage.getItem('timestamp_' + id);
    var now = (new Date()).getTime();
console.log(id, ts, now, ts-now);
    if (ts && ts > now) {
       // if found, we set the secleft of the timer by calculating
       // how much time is 'till the countdown
       var secleft = Math.round((ts - now)/1000);
console.log("secleft:",secleft);
       timer.data('secleft', secleft);
    }
  });
  timer();
});