JSFiddle - React, Tailwind, and code Playground

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>
 

<input type="text" class="fieldname1" value="Submit" />
<input type="text" class="hidden_name1" value="Submit" />



    <input type="submit" class="submitt" value="Submit" />
    <input type="button" value="Add a field" class="add" id="add" />
  </form>
</div>

JavaScript

jQuery(document).ready(function($) {
    $(".add_new_business_card").submit(function(e) {
        e.preventDefault(); // avoid to execute the actual submit of the form.

        /*		var name = $('#name').val();
        		var email = $('#email').val();
        		var content = $('#data').val();
        		var image = $('#image').val();*/

        var values = [];
        $("input[name='hidden_values[]']").each(function() {
            values.push($(this).val());
        });

        var data = {

            // It is the action attribute of the form, same name is used in the wp action hook wp_ajax_THE_ACTION_NAME			 
            'action': 'business_card_response',
            //'data': $(".add_new_business_card").serializeArray()


            'data': values
            /*            'name': name,
            			'email': email,
            			'this_field': this_field*/

        };

        // the_ajax_script.ajaxurl is a variable that will contain the url to the ajax processing file

        /*
         * $.post()
         * It contins three main parameters
         * First parameter contains the url
         * 2nd parameter contains the POST data
         * 3rd parameter contains the response that will be sent to the page
         * further the first parameter have two sub parameters i.e
         * first parameter is localize script name, 2nd is the url that contains ajax library 
         */

        $.post(the_ajax_script.ajaxurl, data,
            function(response) {
                //var js_object = JSON.parse(response);
                console.log(form_data);
            });
        return false;
    });


    $("#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\">...