JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<ul>
    <li>
        <label>Date of event<sup>*</sup>
        </label>
        <input class="field-required" type="text" name="event_date" readonly="readonly" />
    </li>
    <li>
        <ul class="float-fields">
            <li>
                <label>Start time<sup>*</sup>
                </label>
                <input class="field-required" type="text" name="event_start_time" data-validation="time" />
            </li>
            <li>
                <label>End time<sup>*</sup>
                </label>
                <input class="field-required" type="text" name="event_end_time" data-validation="time" />
            </li>
        </ul>
    </li> <a class="duplicate-fields" data-fields="all">&plus; Add date</a>

</ul>

JavaScript

$('.duplicate-fields').each(function () {

     var noOfClones = 5;
     var el = $(this).parent('ul');
     for (var i = 0; i < noOfClones; i++) {
         var html = el.clone();
         $(html).find('.duplicate-fields').remove().appendTo('.duplicate-fields');
     }
 });