JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
echo 'fname:' . $_POST['fname'] . '<br/>';
echo 'lname:' . $_POST['lname'];
?>
<div class="container">
<form id="submit" method="post">
        <fieldset>
            <legend>Enter Information</legend>
            <label for="fname">Client First Name:</label>
<input id="fname" class="text" name="fname" size="20" type="text">

            <label for="lname">Client Last Name:</label>
<input id="lname" class="text" name="lname" size="20" type="text">

            <button class="button positive"> <img src="../images/icons/tick.png" alt=""> Add Client </button>
        </fieldset>
    </form>
<div class="success" style="display: none;">Client has been added.</div>
</div>
</body>
</html>

JavaScript

$(document).ready(function(){
    $("form#submit").submit(function() {

    var fname = $('#fname').attr('value');
    var lname = $('#lname').attr('value');
        $.ajax({
            type: "POST",
            url: "/ajax_json_echo/",
            data: "fname="+ fname +"& lname="+ lname,
            success: function(){
                $('form#submit').hide(function(){$('div.success').fadeIn();});

            }
        });
    return false;
    });
});