JSFiddle - React, Tailwind, and code Playground

DAN Agenda item

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="directory-list">
  <div class="list-default directory-entries">
    <ul>
      <li class="linked data-linked active" data-type="entry" data-index="0" data-entry-id="6" data-timestamp="1/9/2017 11:00" data-timestamp-unix="1483959600000" data-datestamp="1483920000000" data-day="0" style="border-left-color: yellow;">
        <div class="list-desc">
          <p class="list-title">Registration &amp; Information</p>
          <p class="time-place">11:00 am – 5:00 pm · <span>Registration Desk 3A &amp; 3B</span></p>
        </div>

        <div class="survey-rating">
          <div class="form-group clearfix">
            <div class="col-sm-12 star-rating">
              <input class="rating-input" data-label="star rating" name="one" type="radio" id="starrating05" value="5">
              <label class="rating-star" for="starrating05"><span class="fa fa-star-o"></span><span class="fa fa-star"></span></label>
              <input class="rating-input" data-label="star rating" name="one" type="radio" id="starrating04" value="4">
              <label class="rating-star" for="starrating04"><span class="fa fa-star-o"></span><span class="fa fa-star"></span></label>
              <input class="rating-input" data-label="star rating" name="one" type="radio" id="starrating03" value="3">
              <label class="rating-star" for="starrating03"><span class="fa fa-star-o"></span><span class="fa fa-star"></span></label>
              <input class="rating-input" data-label="star rating" name="one" type="radio" id="starrating02" value="2">
              <label class="rating-star" for="starrating02"><span class="fa fa-star-o"></span><span class="fa fa-star"></span></label>
              <input class="rating-input" data-label="star rating" name="one" type="radio"...

CSS

.directory-list ul {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 200;
  padding: 0;
  margin: 0;
}

.directory-list li {
  list-style: none;
  border-bottom: 1px solid rgba(51, 51, 51, 0.2);
  padding: 10px 10px 10px 10px;
  position: relative;
  border-left: 5px solid transparent;
}

.directory-list li.dark {
  background-color: #000;
}

.directory-list li.active {
  background-color: #00bcd4;
  color: #fff;
}

.directory-list .list-default li.linked {
  cursor: pointer;
}

.directory-list .list-default li .list-title {
  font-size: 16px;
  font-weight: normal;
  margin: 0;
}

.directory-list .list-default ul > li .list-title ~ .time-place {
  margin: 0;
  font-size: 12px;
  opacity: 0.6;
  font-weight: bold;
}

.directory-list .list-default ul > li.active .list-title ~ .time-place {
  opacity: 0.7;
}

.directory-list .list-default li .list-tags {
  font-weight: normal;
  font-size: 11px;
  margin-top: 5px;
  position: relative;
  z-index: 10;
}

.directory-list .list-default li .list-tags a {
  color: #333;
  background: #ddd;
  padding: 4px;
  margin-right: 4px;
  line-height: 24px;
}

.directory-list .list-default li .survey-rating {
  position: relative;
  z-index: 10;
}

.directory-list .list-default li .form-group {
  line-height: 11px;
}


/* START RATING */

.star-rating {
  overflow: hidden;
  display: inline-block;
  text-align: left;
  direction: rtl;
}

.star-rating .rating-input {
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0 0 0 -30px;
  opacity: 0;
}

.star-rating .rating-star {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
}

.star-rating .rating-star .fa {
  font-size: 30px;
  color: #00BCD4;
}

.directory-list li.active .star-rating .rating-star .fa {
  color: #fff;
}

.star-rating .rating-star .fa.fa-star-o {
  display: block;
}

.star-rating .rating-star .fa.fa-star {
  display: none;
}

.star-rating .rating-input:checked ~...

JavaScript

$('.rating-star').on('click', function(event) {
	event.stopPropagation();
  event.preventDefault();
  var inputID = $(this).attr('for');
  $('.rating-input#'+inputID).prop("checked", true).trigger('change');
});
$('.rating-input').on('change', function(event){
	event.stopPropagation();

	var _this = $(this);
  var value = $(this).val();
  $(this).parents('.survey-rating').find('.value-chosen').html(value);
	setTimeout(function(){
  	_this.parents('.survey-rating').addClass('feedback-given');
  }, 400);
});

$('.change-rating').on('click', function(event){
	event.stopPropagation();
	$(this).parents('.survey-rating').removeClass('feedback-given');
});