JSFiddle - React, Tailwind, and code Playground

by Viruthagiri

HTML

<script src="http://www.mdelrosso.com/sheepit/js/sheepItPlugin/jquery.sheepItPluginLastVersion.js"></script>
<!-- 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

$(document).ready(function() {
     
    var sheepItForm = $('#sheepItForm').sheepIt({
        separator: '',
        allowRemoveLast: true,
        allowRemoveCurrent: true,
        allowRemoveAll: true,
        allowAdd: true,
        allowAddN: true,
        maxFormsCount: 10,
        minFormsCount: 0,
        iniFormsCount: 2,
        data: [
            {
                'sheepItForm_#index#_phone': '364-3456-746'
            },
            {   
                // #form#_#index# will be replaced by sheepItForm_1 (In this case)
                '#form#_#index#_phone': '64-56775-4545'
            },
            {   
                // If you respect the pattern, you can pass only phone and other information will be deduced
                'phone': '76-57775-4665',
                'select': '5'
            }
        ]
    });
 
});