JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="span3">
        <p>
            <input type="checkbox" name="items[46][46]" value="46" style="margin-bottom: 6px;" class="reveal_below" data-item-id="46">                                <strong>Product</strong>
        </p>
    </div>

    <div class=" span4 hidden_below hidden_below__46" style="">
        <textarea id="x" style="width: 100%;height:6em;" placeholder="Return notes..." name="items[46][customer_item_return_notes]" id="" cols="30" rows="10"></textarea>
    </div>
    <div class="clearfix"></div>
   
</div>

JavaScript

$(function() {
    $('.reveal_below').on('change', function(e) {
        
        e.preventDefault();
        var item_id = $(this).attr('data-item-id');
        if (this.checked) {
            
            $('.hidden_below__' + item_id).css({
                            'margin-left': '0px',
                            display: 'block',
                            opacity: '0'
                        }).animate({ 
                           'margin-left': '15px',
                            opacity: '1'
            }, 
     250, function() {
        console.log("-----------");
        $("#x").focus();
    })
        } else {
            $('.hidden_below__' + item_id).slideUp();
        }
    });
});

/*animate({
                            'margin-left': '15px',
                            opacity: '1'
                        },
                        250
                    )*/

/*promise().done(function() {
                setTimeout(function(){ 
                    var tx = $('#x');
                    tx.focus();               
                }, 1000);
                
            })*/