JSFiddle - React, Tailwind, and code Playground
HTML
<input type="hidden" value="1" id="theValue" />
<div class="form-horizontal vehicleclass0">
<select class="vehicleclass" name="contact['Vehicle0']">
<option value="" style="color: #cecece !important;">--Vehicle type--</option>
<option value="Car">Car</option>
<option value="Truck">Truck</option>
<option value="Boat">Boat</option>
<option value="Tractor">Tractor</option>
</select>
<input type="text" class="vehicleclass" name="contact[Make-Model Vehicle0]" placeholder="Make/Model" autocapitalize="off">
</div>
<div id="myDiv"></div>
<a href="javascript:;" onclick="addElement();"><div class="addvehiclewrapper" id="plus">Add another vehicle</div></a>
CSS
.vehicleclass0 {
margin-bottom: 5px;
}
.addvehiclewrapper {
margin-top: 20px;
}
JavaScript
function addElement() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value - 1) + 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'Vehicle ' + num + '';
newdiv.setAttribute('id', divIdName);
newdiv.innerHTML = '<div class="form-horizontal"><select class="vehicleclass" name="contact[' + divIdName + ']"><option value="" style="color: #cecece !important;">--Vehicle type--</option><option value="Car">Car</option><option value="Truck">Truck</option><option value="Boat">Boat</option><option value="Tractor">Tractor</option></select><input type="text" class="vehicleclass" name="contact[Make-Model ' + divIdName + ']" placeholder="Make/Model" autocapitalize="off"></div> <a href="" onclick="javascript:removeElement(' + divIdName + '); return false">Remove ' + divIdName + '</a>';
ni.appendChild(newdiv);
}