JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<form id="form-1">
<label>enter email</label>
<input type="text" id="email" />
<input type="submit" class="submit" id="1" value="send email">
</form>
<form id="form-2">
<label>enter name</label>
<input type="text" id="name" />
<input type="submit" id="2" class="submit" value="send name">
</form>
<form id="form-3">
<label>enter phone number</label>
<input type="text" id="phone-number" />
<input type="submit" id="3" class="submit" value="send phone number">
</form>

CSS

form{margin:10px; padding:15px; border:1px solid #585858;}

JavaScript

$(document).ready(function(){
    
    $('form').submit(function(){
        return false;
    });
    
    $('.submit').click(function(){
        var $submitId = $(this).attr('id'),
            $currentForm = $('#form-'+ $submitId),
            $currentFormId = $currentForm.attr('id');
        
        alert('you are submitting form: '+$currentFormId+', now lets hide it');
        $currentForm.fadeOut(650);
        
        return false;        
    });
});