JSFiddle - React, Tailwind, and code Playground

HTML

<div align="left">
    <input id="btn" type="button" value="Toggle" />
    <input id="txtbox" type="text" value="hello" />
 <div border="1"  id="mydiv" >
    <table id="t1" width="90%" border="0">
    <tr>
        <td>
<span>span1</span>                    
        </td>
        <td>
<span>span1</span>
        </td>
</tr>
    <tr>
        <td>
<span>span1</span>
        </td>
        <td>
<span>span1</span>
        </td>
</tr>
        <tr>
        <td>
<span>span1</span>                    
        </td>
        <td>
<span>span1</span>
        </td>
</tr>
    <tr>
        <td>
<span>span1</span>
        </td>
        <td>
<span>span1</span>
        </td>
</tr>
        <tr>
        <td>
<span>span1</span>                    
        </td>
        <td>
<span>span1</span>
        </td>
</tr>
    <tr>
        <td>
<span>span1</span>
        </td>
        <td>
<span>span1</span>
        </td>
</tr>
    <tr>
        <td>
<span>span1</span>
        </td>
        <td>
<span>span1</span>
        </td>
</tr>
        
</table>
    </div>
</div>

CSS

div
{
    padding:10px;
}
table
{
    margin-top:10px;
}

JavaScript

$('#mydiv').hide();
$('#btn').click(function () {
        $('#mydiv').slideToggle('fast', function () {
            var box = $("#txtbox")
                if (box.val() != '') {
                    this.vbackup = box.val();
                }

            alert(this.vbackup);
            if ($(this).is(":visible")) {
                
            }
            else {
                if (box.val() == '') {
                    // In this alert vbackup
                    // is empty !!
                    alert(this.vbackup );
                    $('#txtbox').val(this.vbackup );
                }
            }
        });

        return false;
    });