JSFiddle - React, Tailwind, and code Playground

HTML

<button>Load text</button>
<div id="contentBox"></div>

CSS

#contentBox {
    width:10em;
    height:5em;
    border:1px solid;
    overflow:auto;
}
#focusDiv {
    display: hidden;
    width:0%;
    height:0%;
}

JavaScript

$(document).ready(function () {
    $("button").on("click", function (e) {
        e.preventDefault();
        $("div").html("Very long text 1<br />Very long text 2<br />Very long text 3<br />Very long text 4<br />Very long text 5<br />Very long text 1<br />Very long text 2<br />Very long text 3<br />Very long text 4<br />Very long text 5<br />");
        $("div").append('<input type="text" id="focusDiv">');
        /*
     Here I need to have some code which gives "focus to the div, so if I press the load text and then immediately PageDown key, sthedvis scrolls down.
     
     I have tried .focus() 
     but it doesn't work
     
     */
        $('#focusDiv').focus();

    });
    var c = $('#contentBox')

});