JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table table-bordered table-hover additionalMargin alignment" id="table1">
  <thead>
    <tr >
      <th>Campaign Type</th>
      <th>Deployment Date</th>
      <th>Additional Information</th>
    </tr>
  </thead>
  <tbody>
    <tr class='template'>
      <td>
        <select class="selectType" name='typeInput[{{$ckey}}][campType]' id="campInput">
          <option value=""></option>
          <option value="Main">Main</option>
          <option value="Resend">Resend</option>
          <option value="Follow Up">Follow Up</option>
          <option value="Other">Other</option>
        </select>
      </td>
      <td>
        <input type="text" name='typeInput[{{$ckey}}][deliveryDate]' id="dateInput" placeholder='Completion Date' class="form-control dateControl"/>
      </td>
      <td>
        <textarea name='typeInput[{{$ckey}}][addInfo]' id="additionalInput"  placeholder='Additional Information' class="form-control noresize"></textarea>
      </td>
    </tr>
  </tbody>
</table>

<a id='add' class="pull-right btn btn-default">ADD</a>

JavaScript

$(function() {
    initThings();

    $('#add').on('click', function() { add_row($('#table1')); });
});


function add_row($table) {
    var tr_id = $table.find('tr').length - 1;
    var $template = $table.find('tr.template');
    var $tr = $template.clone().removeClass('template').prop('id', tr_id);

    $tr.find(':input').each(function() {
        if($(this).hasClass('hasDatepicker')) {
            $(this).removeClass('hasDatepicker').removeData('datepicker');
        }

        var input_id = $(this).prop('id');
        input_id = input_id + tr_id;
        $(this).prop('id', input_id);

        var new_name = $(this).prop('name');
        new_name = new_name.replace('[0]', '['+ tr_id +']');
        $(this).prop('name', new_name);

        $(this).prop('value', '');
    });
    $table.find('tbody').append($tr);

    $(".dateControl", $tr).datepicker({
        dateFormat: "dd-mm-yy"
    });

    $(".selectType", $tr).select2({
        tags: true
    });
}

function initThings() {
    $(".dateControl").datepicker({
        dateFormat: "dd-mm-yy"
    });

   $(".selectType").select2({
        tags: true
    });
}