JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/select2/select2-bootstrap-theme/master/dist/select2-bootstrap.min.css">
<div class="container">
  <h1>
    New Advanced Rating
  </h1>

  <ul id="ar_list" class="list-unstyled"></ul>

  <button class="btn btn-primary" id="add">
    Add
  </button>
</div>

SCSS

#ar_list{
  li{
    padding-bottom: 15px;
  }
  input[type="range"]{
    margin-top: 8px;
  }
}

JavaScript

ar_list = $('#ar_list');
ar_add = $('#add');
ar_list_item = $('<li><div class="row"><div class="col-xs-4"><select class="form-control"></select></div><div class="col-xs-8"><input type="range" min="0" max="10" value="0" /></div></div></li>');
rating_labels = 'realism,storyline,voice acting,difficulty,immersive,fun,environment realism,level design,artstyle'.split(',');

$(rating_labels).each(function(index){
  $('select', ar_list_item).append("<option value=\"" + index + "\">" + this + "</option>");
});

var add_ar = function(){
  var ar_list_length = ar_list.find('li').length;
  if(ar_list_length < 5){
    new_item = ar_list_item.clone();
    ar_list.append(new_item);
    $('select', new_item).select2({
      theme: "bootstrap"
    });
    if(ar_list_length == 4){
      ar_add.hide();
		}
  }
}

ar_add.click(add_ar);

add_ar();