JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <fieldset>
        <div id="formAlts">
            <div class="form-group pull-left" style="padding-left: 20px; padding-right: 20px; width: 353px;">
                <label for="txtName">Name</label>
                <div class="controls">
                    <input type="text" id="txtName" class="form-control" name="txtName">
                </div>
            </div>
            <div class="form-group pull-left" style="padding-left: 20px; padding-right: 20px; width: 353px;">
                <label for="txtEmail">E-mail</label>
                <div class="controls">
                    <input type="text" id="txtEmail" class="form-control" name="txtEmail">
                </div>
            </div>
            <div class="form-group pull-left" style="padding-left: 20px; padding-right: 20px; width: 353px;">
                <label for="txtPhone">Phone Number</label>
                <div class="controls">
                    <input type="text" id="txtPhone" class="form-control" name="txtPhone">
                </div>
            </div>
            <div class="form-group pull-left" style="padding-left: 20px; padding-right: 20px; width: 353px;">
                <label for="txtDate">Datepicker</label>
                <div class="controls">
                    <input type="text" id="txtDate" class="form-control" name="txtDate">
                </div>
            </div>
            <div class="form-group pull-left" style="padding-left: 20px; padding-right: 20px; width: 353px;">
                <label for="txtMailAddress">Mailaddress</label>
                <div class="controls">
                    <input type="text" id="txtMailAddress" class="form-control" name="txtMailAddress">
                </div>
            </div>
            <div class="form-group pull-left" style="padding-left: 20px; padding-right: 20px; width: 353px;">
                <label for="txtAge">Age</label>
                <div class="controls">
                    <input type="text" id="txtAge"...

JavaScript

$("form").submit(function (e) {
    e.preventDefault(); // This will prevent the form submission
    var response = "";
    var missing = "";
    $('#submit-holder').find('input').each(function () {
        if ($(this).val() == '') {
            missing += $('label[for="' + this.id + '"]').html() + " | ";
            empty_fields = true;
            missing_fields = true;
        } else if ($(this).val() != '') {
            empty_fields = false;
            $('.alert').hide();
        }

    });

    response += "* <strong>You need to fill out:</strong> " + missing;

    if (!$('#user_terms').is(':checked')) {
        response += "<br>* You need to accept the terms and conditions to continue";
    }

    var email = $('[name="txtEmail"]').val();

    if (IsEmail(email) == false) {
        valid_email = false;
        response += "<br><strong>* The e-mail address you've entered is invalid</strong>";
    }

    response_message(response);

    if (!missing_fields && valid_email !== false && $('#user_terms').is(":checked")) {

        $('.alert').hide()

        var canvas = [];

        var Submission = [];

        var Answer = [];

        $('.question-holder').find('input').each(function () {
            answer = $(this).val()
            input_name = $(this).attr('name')
            input_label = $(this).closest('li').find('label')

            Answer.push({
                Answers: answer,
                Input_Name: input_name
                //Input_label: input_label
            });

        });
        $('#submit-holder').find('input').each(function () {
            answer = $(this).val()
            input_name = $(this).attr('name')
            //submit_label = $(this).closest('li').find('label')

            Submission.push({
                //Question: submit_label,
                Input_Name: input_name,
                Submitted_data: answer
            });
        });

        Share_Callback = 1 // 1 means Yes, user shared this, 0 means no share

  ...