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 value = $('#txtbox').val() || $(this).data("value");
            if ( !$(this).is(":visible") ) {
                if ( $('#txtbox').val() == '') {
                    $('#txtbox').val( value );
                }
            }
            $(this).data("value", value);
        });
    
        return false;
    });