JSFiddle - React, Tailwind, and code Playground

by Zubair Mushtaq

HTML

<div class="form-style-5 print_forms_left_body">
  <form class="add_new_business_card" method="post">
    <fieldset>
    <legend>Basic Info</legend>
    <div class="upper-business-card">
      <input type="text" class="half-field" name="name" placeholder="Your Name *" id="name">
      <input type="email" class="half-field" name="email" placeholder="Your Email *" id="email">
      <input type="text" class="half-field" name="contact" placeholder="Your Contact *" id="contact">
      <input type="text" class="half-field" name="website" placeholder="Your Website *" id="website">
      <textarea name="content" placeholder="About yourself" id="content"></textarea>
    </div>
    </fieldset>
    <fieldset>
    <legend>Social Info</legend>
    <div class="upper-business-card">
      <input type="text" class="half-field" name="facebook" placeholder="Facebook" id="facebook">
      <input type="email" class="half-field" name="whatsapp" placeholder="Whatsapp" id="whatsapp">
      <input type="text" class="half-field" name="twitter" placeholder="Twitter" id="twitter">
      <input type="text" class="half-field" name="linkedin" placeholder="Linked In" id="linkedin">
    </div>
    </fieldset>
    <fieldset id="buildyourform">
    <legend>Add More Tabs</legend>
    </fieldset>
    <!--
      <div class="select2-wrapper">
    <select name="wpmse_options[social_list]" id="mse_social_list" class="input-block-level wpmse_select2" required>
        <option value="fa-adn" data-icon="fa-adn">Adn</option>
        <option value="fa-android" data-icon="fa-android">Android</option>
        <option value="fa-apple" data-icon="fa-apple">Apple</option>
        <option value="fa-bitbucket" data-icon="fa-bitbucket">Bitbucket</option>
        <option value="fa-bitbucket-square" data-icon="fa-bitbucket-square">Bitbucket Square</option>
        <option value="fa-bitcoin" data-icon="fa-bitcoin">Bitcoin</option>
        <option value="fa-btc" data-icon="fa-btc">Btc</option>
        <option...

JavaScript

jQuery(document).ready(function($) {
    

    $("#add").click(function() {
        var intId = $("#buildyourform div").length + 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\" />");
        var fName = $("<input type=\"text\" class=\"fieldname\" name=\"values[]\" />");
        var fType = $("<select name=\"values\" class=\"extra_tab_list fieldtype\"> <optgroup label=\"Social Items\"><option value=\"fa-adn\" data-icon=\"fa-adn\">Adn</option> <option value=\"fa-android\" data-icon=\"fa-android\">Android</option> <option value=\"fa-apple\" data-icon=\"fa-apple\">Apple</option> <option value=\"fa-bitbucket\" data-icon=\"fa-bitbucket\">Bitbucket</option> <option value=\"fa-bitbucket-square\" data-icon=\"fa-bitbucket-square\">Bitbucket</option> <option value=\"fa-bitcoin\" data-icon=\"fa-bitcoin\">Bitcoin</option> <option value=\"fa-btc\" data-icon=\"fa-btc\">Btc</option> <option value=\"fa-css3\" data-icon=\"fa-css3\">Css3</option> <option value=\"fa-dribbble\" data-icon=\"fa-dribbble\">Dribbble</option> <option value=\"fa-dropbox\" data-icon=\"fa-dropbox\">Dropbox</option> <option value=\"fa-facebook-square\" data-icon=\"fa-facebook-square\">Facebook</option> <option value=\"fa-flickr\" data-icon=\"fa-flickr\">Flickr</option> <option value=\"fa-foursquare\" data-icon=\"fa-foursquare\">Foursquare</option> <option value=\"fa-github-square\" data-icon=\"fa-github-square\">Github</option> <option value=\"fa-gittip\" data-icon=\"fa-gittip\">Gittip</option> <option value=\"fa-google-plus-square\" data-icon=\"fa-google-plus-square\">Google Plus</option> <option value=\"fa-html5\" data-icon=\"fa-html5\">Html5</option> <option value=\"fa-instagram\" data-icon=\"fa-instagram\">Instagram</option> <option value=\"fa-linkedin-square\" data-icon=\"fa-linkedin-square\">Linkedin</option> <option value=\"fa-linux\" data-icon=\"fa-linux\">Linux</option> <option value=\"fa-maxcdn\" data-icon=\"fa-maxcdn\">Maxcdn</option> <option...