JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-md-6 col-sm-6 col-xs-12 top-m20">
  <h4 class="color-blue left">Tax Rate Types</h4>
  <div class="selectall">
    <div class="checkbox">
      <label>
        <input type="checkbox" value="">
        <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
        <span class="margin-left10">Select All</span>
      </label>
    </div>
  </div>
  <div class="clear"></div>
  <div id="append_TaxRateTypes">

  </div>
  <div class="top-m15">
    <a id="add_TaxRateTypes" name="addFields">+add tax rate type</a>
  </div>
  <div id="newAdd_TaxRateTypes" style="display:none;">
    <div class="clear"></div>
    <div class="col-md-12 col-sm-12 col-xs-12 top-m20">
      <div class="col-md-5 col-sm-5 col-xs-5 padding-left">
        <label class="row-head">NAME</label>
      </div>
      <div class="col-md-5 col-sm-5 col-xs-5">
        <label class="row-head">CUSTOM NAME</label>
      </div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12 padding0">
      <div class="product">
        <div class="col-md-5 col-sm-5 col-xs-5 padding-left">
          <div class="select">
            <select class="form-control" id="select_TaxRateTypes" name="selectField">
              <option value="1">Association</option>
              <option value="2">Corporation</option>
              <option value="3">General Partnership</option>
              <option value="4">Joint Venture</option>
              <option value="5">Limited Liability Company (LLC)</option>
              <option value="6">Limited Liability Limited Partnership (LLLP)</option>
              <option value="7">Limited Liability Partnership (LLP)</option>
              <option value="8">Limited...

CSS

@import url('https://fonts.googleapis.com/css?family=Lato');
body {font-family: 'Lato', sans-serif; padding: 0!important; margin: 0!important; overflow-x: hidden;}
.modal-open {overflow-y: auto;}
a:focus {outline: none;}
.clear {clear: both;font-size: 1px;}
a {color: #396da5;cursor: pointer;outline: none;}
.hr {margin: 10px 0;}
.left {float: left;}
.right {float: right;}
.line34 {line-height: 34px;}
.white {background: #fff;min-height: 82vh;}
.padding0 {padding: 0;}
.padding-left {padding-left:0;}
.padding-right {padding-right:0;}
.padding-top15 {padding-top: 15px;}
.padding-bot20 {padding-bottom: 20px;}
.padding13 {padding: 13px 0;}
.margin0 {margin: 0!important;}
.margin-left5 {margin-left: 5px;}
.margin-left10 {margin-left: 10px;}
.margin20 {margin: 20px 15px;}
.margin10 {margin: 10px 15px;}
.margin5 {margin: 5px 15px;}
.top-m5 {margin-top: 5px!important;}
.top-m15 {margin-top: 15px!important;}
.top-m20 {margin-top: 20px!important;}
.top-m30 {margin-top: 30px!important;}
.tp-padding {padding: 15px 0!important;}
.padding20 {padding: 20px;}
.padding5 {padding: 5px;}
.padding10 {padding: 10px;}
.lr-padding {padding: 5px 10px;}
.border-r {border-right: solid 1px #ccc;}
.border-l {border-left: solid 1px #ccc;}
.cline {position: relative;}
.cline-in {position: absolute;left: 50%;top: 15px;bottom: 15px;border-left: solid 1px #ccc;}
.bluecolor {color: #48a3d7;}
@media only screen and (max-width:767px) {
  .cline-in {border-left: solid 1px transparent;}
  .empty {display: none;}
}
.doughnut1 {position: absolute;top: 15px;right: 15px;min-width: 120px;}
/*****************************Table Start********************************************/
.table2 {margin: 0;padding: 0;}
.table2 thead tr th {font-weight: normal;font-size: 12px;border:0;padding: 5px 22px;}
.table2 tbody tr td {background: #f7f8f9;border: 0;border-bottom: solid 3px #fff;padding: 5px 10px; line-height: 34px;}
.table2 tbody tr td:last-child {width: 150px;padding: 5px 15px;}
.table2 tbody tr td.hiddenRow...

JavaScript

$(document).on('click', '[name="addFields"]', function () {
  var dynamicField = $(this).attr('id').split('_')[1];
  $(this).parent('div').hide();
  $('#newAdd_' + dynamicField).show();
  $('#addCustomName_' + dynamicField).hide();
});

$(document).on('click', '[name="selectField"]', function () {
  var dynamicField = $(this).attr('id').split('_')[1];
  $('#txtCustomName_' + dynamicField).val();
  if (this.value == 0) {
    $('#txtCustomName_' + dynamicField).show();
    $('#removeCustomName_' + dynamicField).hide();
    $('#addCustomName_' + dynamicField).hide();
  }
  else if (this.value == -1) {
    $('#txtCustomName_' + dynamicField).hide();
    $('#removeCustomName_' + dynamicField).hide();
    $('#addCustomName_' + dynamicField).hide();
  }
  else {
    $('#txtCustomName_' + dynamicField).hide();
    $('#removeCustomName_' + dynamicField).hide();
    $('#addCustomName_' + dynamicField).show();
  }

});

$(document).on('click', '[name="addCustomName"]', function () {
  var dynamicField = $(this).attr('id').split('_')[1];
  $('#txtCustomName_' + dynamicField).val();
  $('#txtCustomName_' + dynamicField).show();
  $('#removeCustomName_' + dynamicField).show();
  $('#addCustomName_' + dynamicField).hide();
});

$(document).on('click', '[name="removeCustomName"]', function () {
  var dynamicField = $(this).attr('id').split('_')[1];
  $('#txtCustomName_' + dynamicField).hide();
  $('#removeCustomName_' + dynamicField).hide();
  $('#addCustomName_' + dynamicField).show();
});

$(document).on('click', '[name="cancelCustomName"]', function () {
  var dynamicField = $(this).attr('id').split('_')[1];
  $('#txtCustomName_' + dynamicField).val('');
  $('#select_' + dynamicField).val('-1');

  $('#newAdd_' + dynamicField).hide();
  $('#add_' + dynamicField).parent('div').show();    
});

$(document).on('click', '[name="saveCustomName"]', function () {
  var dynamicField = $(this).attr('id').split('_')[1];
  var selectedVal = $('#select_' +...