JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<button id="plus">Plus</button>
<div id="template" name="template" class="form-group unique">
  <label class="control-label col-md-2" for="Course">Course</label>
  <!-- the drop down below has id and name as Course[0].Title
I need to increment index inside []  -->
  <div class="col-md-10">
    <select class="form-control drop valid" id="Course[0].Title" name="Course[0].Title">
      <option value="1">Statistics</option>
      <option value="2">Trigonometry</option>
      <option value="3">Biology</option>
      <option value="4">Neurology</option>
      <option value="5">Applied</option>
      <option value="6">Theoretical</option>
    </select>
  </div>
</div>

JavaScript

$(document).ready(function () {
	//initialize the index with 1, the item with 0 index is already in webpage.
        var i = 1;
        $("#plus").on('click', function () {
	//Add after the element which has class unique
 						var clone2 = $('#template').clone();  
            $("#template").after(clone2);
            $(clone2).attr('id',"template"+i);
            $(clone2).attr('name',"template"+i);
	//Find name inside unique and update
            $(clone2).find(".drop ").attr("name", "Course[" + i + "].Title ");
	//Find id inside unique and update
            $(clone2).find(".drop ").attr("id", "Course[" + i + "].Title ");
	//Increment the index
  				
            i++;
        });

    });