JSFiddle - React, Tailwind, and code Playground

HTML

<!-- This is the area books are searched for in -->
<div id="bookarea">
    <form action="" method="post">
        <fieldset>
            <label for="keywords">Keywords</label>
            <input name="keywords" id="keywords" type="text"/>
            <input name="ajaxsearch" id="ajaxsearch" type="submit" value="Search" />
        </fieldset>
    </form>
    <br/>
    <span id="results">Results will appear here.</span>
    <p>N.B. They won't on JSFiddle</p>
    
</div>

JavaScript

// Fire when the document is ready
$(document).ready(function() {    
    
    // Fire when the #booksearch button is clicked
    $('#ajaxsearch').click(function() {
        
        // Stop the Search input reloading the page by preventing its default action
        event.preventDefault();
        
        // Set up the data to be sent via XHR
        var form_data = {
            keywords: $('#keywords').val()
        };
        
        // Make the Ajax call
        $.ajax({
            url: base_url + "echo/html",
            type: 'POST',
            data: form_data,
            success: function(msg) {
                $('#results').html(msg); 
            }
        });
                    
    });
    
});