JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#" id="myForm">
    Check/Uncheck boxes to submit form <br/>
    1. <input type="checkbox" name="Box1" id="Box1"/>
    <br/>
    2. <input type="checkbox" name="Box2" id="Box2"/>
    <br/>
    3. <input type="checkbox" name="Box3" id="Box3"/>
    <br/>
    <input type="text" name="text" id="testtext" value="Default value"/>
</form>
<hr />
Events:<br/>
<div id="response">
    
</div>

CSS

form {
    border: solid 1px gray;
    padding: 10px;
}

#response{
    border: solid 1px gray;
    padding: 10px;
}

.receive{
    border: dotted 1px darkgray;
    background-color: #999;
    margin: 3px;
    padding: 3px;
}

.send{
    border: dotted 1px darkgray;
    background-color: #bbb;
    margin: 3px;
    padding: 3px;
}

JavaScript

function sendValues() {
    var str = $("#myForm").serialize();
    $.ajax({
            type: 'POST',
            data: str,
            cache: false,
            success: function(data){
                $('#response').prepend('<div class="receive"> Response to form submit (expect errors from jsFiddle): ' + data.error + '</div>');
            }
    });
}
           
$('input[type=checkbox]').change(function(){
    $('#response').prepend('<div class="send">' + $(this).attr('name') + ' was changed</div>');
   sendValues();
});