JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12">        
  <table class="table custy ValignMiddle">
    <thead>
      <tr>
        <th class="placeholder">NET ASSET VALUE</th>
        <th class="placeholder">CURRENCY CODE</th>
        <th class="placeholder">AS-OF-DATE</th>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bbff" id="tr_1">
        <td><input type="text" class="form-control form-m" value="4634"></td>
        <td>
          <div class="down-arrow">
            <select class="form-control form-m">
              <option value="">AOA</option>
            </select>
          </div>
        </td>
        <td>
          <div class="cal-icon">
            <input type="text" class="form-control form-m" value="08/31/2018" id="datepicker1">
          </div>
        </td>
        <td><span class="del_icon glyphicon glyphicon-trash"></span></td>
      </tr>
    </tbody>
  </table>
  <a class="addnetasset">+add new</a>
</div>

CSS

a {cursor: pointer;}
.bbff {background: #f0f4f6!important;border-bottom: solid 3px #FFF!important;padding: 6px 0;}
.bbff td {vertical-align: middle!important;}
.del_icon {color:#F00; cursor: pointer;}

JavaScript

$(document).ready(function(){
  $(".addnetasset").click(function(){
    var total_element = $(".bbff").length; 
    var lastid = $(".bbff:last").attr("id");
    var split_id = lastid.split("_");
    var nextindex = Number(split_id[1]) + 1;
    var max = 4;
    if(total_element < max ){
      $(".bbff:last").after("<tr class='bbff' id='tr_"+ nextindex +"'></tr>"); 
      $("#tr_" + nextindex).append("<td><input type='text' class='form-control form-m' value='4634'></td><td><div class='down-arrow'><select class='form-control form-m'><option>AOA</option></select></div></td><td><div class='cal-icon'><input type='text' class='form-control form-m' value='' placeholder='DD/MM/YYYY' id='datepicker"+ nextindex +"'></div></td><td><span class='del_icon glyphicon glyphicon-trash remove'></span></td>");
    }
    $( "#datepicker"+ nextindex ).datepicker();     
    $('.bbff').on('click','.remove',function(){       
      $(this).parent().parent().remove()
    });   
  });      
});

$( "#datepicker1" ).datepicker();