JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
<table class="table" id="req_table">
  <thead>
    <tr>
      <th class="col-md-2">Item</th>
      <th class="col-md-2">Store Description</th>
      <th class="col-md-2">Measurement Unit</th>
      <th class="col-md-1">Quantity Demanded</th>
      <th class="col-md-1">Rate</th>
      <th class="col-md-1">Stock In Hand</th>
      <th class="col-md-3">Remarks(If Any)</th>
    </tr>
  </thead>

  <tbody>
    <tr class="tr_clone">
      <td class="col-md-2">
        <div class="cc-form-container-switch gcf-btns">
          <div class="cc-form-control-switcher">
            <div class="btn btn-secondary btn-first btn-switch" id="q1Current" data-value="Current">Current</div>
            <div class="btn btn-secondary btn-second" id="q1New" data-value="New">New</div>
            <input value="Current" id="q3Hidden" name="CrmItem.CurrentSolutions" type="hidden">
          </div>
        </div>

      </td>

      <td class="col-md-2">
        <select class="required form-control col-md-12" id="measurement_unit_id" autocomplete="off" required="true" name="measurement_unit_id[]">
          <option value="" selected="selected">Select Unit</option>
          <option value="1">Test</option>
        </select>
      </td>
      <td class="col-md-1">
        <input class="form-control required" id="quantity_demanded" step="0.01" placeholder="Quantity Demanded" autocomplete="off" required="true" name="quantity_demanded[]" type="number">
      </td>
      <td class="col-md-1">
        <input class="rate form-control required" id="rate" placeholder="Rate" readonly="1" step="0.01"...

CSS

.btn.btn-secondary {
  background-color: transparent;
  border-color: #0577d4;
  color: #0577d4;
  line-height: 1.2;
}

.btn-second {
  border-radius: 0 25px 25px 0;
  position: relative;
  left: -9px;
}

.btn-first {
  border-radius: 25px 0 0 25px;
}

.btn.btn-secondary {
  background-color: transparent;
  border-color: #0577d4;
  color: #0577d4;
  line-height: 1.2;
}

.btn-switch {
  border-color: #3fbd3f !important;
  background-color: red !important;
  color: #fff !important;}

JavaScript

$(".select2").select2();
$('.add_more_item').click(function(e) {

  $latest_tr = $('#req_table tr:last');
  $('select.select2').select2('destroy');

  $clone = $latest_tr.clone();

  $latest_tr.after($clone);
  $('select.select2').select2();
  $clone.find(':text').val('');
  item++;
  show_hide_item(item);
});

$('.remove_item').click(function(e) {
  item--;
  $latest_tr.remove();
  e.preventDefault();
  show_hide_item(item);
});

function show_hide_item(item) {
  if (item > 1) {
    $('.remove_item').show();
  } else {
    $('.remove_item').hide();
  }
}



//Select Button 
$('.cc-form-control-switcher').each(function() {
  $(".cc-form-control-switcher .btn-first, .cc-form-control-switcher .btn-second").on("click", function(e) {
    e.preventDefault();
    var $self = $(this);
    var $siblingSelected = $self.parent().find(".btn-switch");
    $siblingSelected.removeClass("btn-switch");
    $self.addClass("btn-switch");
    var hdnField = $self.parent().find("input[type=hidden]");

    if (hdnField.length > 0) {
      hdnField.val($self.data("value"));
    }
  });
});