JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<form>
    <div class="container">
        <div class="form-group">
            <label for="firstname[0]">Firstname: </label>
            <input id="firstname[0]" name="firstname" type="text" />
        </div>
        <div class="form-group">
            <label for="lastname[0]">Lastname:: </label>
            <input id="lastname[0]" name="lastname" type="text" />
        </div>
        <div class="form-group">
            <label for="title[0]">Title: </label>
            <select id="title[0]" name="title">
              <option>Mr</option>
              <option>Mrs</option>
              <option>Miss</option>
              <option>Other</option>
          </select>
        </div>
    </div>
</form>

JavaScript

$.fn.cloneable = function(cloneableTargetElementSelector)
{
	var THIS = this;
  THIS.data('cloneable', this);
  var currentCount = 'currentCount';
  var incrementFunction = 'increment';
  var cloneElementSelector = cloneableTargetElementSelector;
	var $scope = $(THIS).find(cloneElementSelector);
  
  THIS.data(currentCount, $scope.length);
  
  THIS.data(incrementFunction, function()
  {
  	$(THIS).append($(THIS).find(cloneElementSelector));
  });
}

$('form').cloneable('.container');