JSFiddle - React, Tailwind, and code Playground
HTML
<!-- sheepIt Form -->
<div id="sheepItForm">
<!-- Form template-->
<div id="sheepItForm_template">
<label for="sheepItForm_#index#_phone">Phone <span id="sheepItForm_label"></span></label>
<input id="sheepItForm_#index#_phone" name="person[phones][#index#][phone]" type="text"/>
<label for="sheepItForm_#index#_select">Phone <span id="sheepItForm_label"></span></label>
<select id="sheepItForm_#index#_select" name="person[phones][#index#][select]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<a id="sheepItForm_remove_current">
<img class="delete" src="images/cross.png" width="16" height="16" border="0">
</a>
</div>
<!-- /Form template-->
<!-- No forms template -->
<div id="sheepItForm_noforms_template">No phones</div>
<!-- /No forms template-->
<!-- Controls -->
<div id="sheepItForm_controls">
<div id="sheepItForm_add"><a><span>Add phone</span></a></div>
<div id="sheepItForm_remove_last"><a><span>Remove</span></a></div>
<div id="sheepItForm_remove_all"><a><span>Remove all</span></a></div>
<div id="sheepItForm_add_n">
<input id="sheepItForm_add_n_input" type="text" size="4" />
<div id="sheepItForm_add_n_button"><a><span>Add</span></a></div></div>
</div>
<!-- /Controls -->
</div>
<!-- /sheepIt Form -->
JavaScript
/**
* SheepIt! Jquery Plugin
* http://www.mdelrosso.com/sheepit/
*
* @version 1.1.1
*
* Created By Mariano Del Rosso (http://www.mdelrosso.com)
*
* Thanks to:
* Hubert Galuszka: Continuous index option and support for tabular forms
* Gabriel Alonso: Bugfixes
*
* @license
*
* SheepIt is free software: you can redistribute it and/or modify
* it under the terms of the MIT license
*
* SheepIt is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* MIT license for more details.
*
* You should have received a copy of the MIT license
* along with SheepIt. If not, see <http://en.wikipedia.org/wiki/MIT_License>.
*/ (function($) {
jQuery.fn.sheepIt = function(options) {
/**
* Clone the form template
*/
function cloneTemplate() {
var clone;
// Before clone callBack function
if (typeof options.beforeClone === "function") {
options.beforeClone(source, template);
}
clone = template.cloneWithAttribut(true);
// After clone callBack function
if (typeof options.afterClone === "function") {
options.afterClone(source, clone);
}
// Get source
clone.getSource = function() {
return source;
};
return clone;
}
/**
* Handle click on addForm button
*/
function clickOnAdd(event) {
event.preventDefault();
addForm();
}
/**
* Handle click on addNForm button
*/
function clickOnAddN(event) {
event.preventDefault();
if (addNInput.value !== '') {
addNForms(addNInput.attr('value'));
}
}
/**
* Handle click on Remove current button
*/
...