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();
var vbackup = $('#txtbox').val();
$('#btn').click(function () {
        $('#mydiv').slideToggle('fast', function () {
            
            alert(vbackup);
            if ($(this).is(":visible")) {
                
            }
            else {
                if ($('#txtbox').val() == '') {
                    // In this alert vbackup
                    // is empty !!
                     $('#txtbox').val(vbackup );
                    
                }
                else 
                    vbackup = $('#txtbox').val();
            }
        });

        return false;
    });