JSFiddle - React, Tailwind, and code Playground

HTML

<div id="list">
    <form id="form1" method="post">
        
<h3>Fill in the blanks and then press the submit button.</h3>

        <label>Adjective
            <input type="text" name="adjective" id="adjective" />
        </label>
        <br />
        <br />
        <label>Adjective
            <input type="text" name="adjective2" id="adjective2" />
        </label>
        <br />
        <br />
        <label>Plural Noun
            <input type="text" name="pluralnoun" id="pluralnoun" />
        </label>
        <br />
        <br />
        <label>Verb (ending in "ing")
            <input type="text" name="verb" id="verb" />
        </label>
        <br />
        <br />
        <label>Edible object
            <input type="text" name="edibleobject" id="edibleobject" />
        </label>
        <br />
        <br />
        <label>Monster
            <input type="text" name="monster" id="monster" />
        </label>
        <br />
        <br />
        <label>Adjective
            <input type="text" name="adjective3" id="adjective3" />
        </label>
        <br />
        <br />
        <label>Monster (again)
            <input type="text" name="monster2" id="monster2" />
        </label>
        <br />
        <br />
        <label>Verb (ending in "ing")
            <input type="text" name="verb2" id="verb2" />
        </label>
        <br />
        <br />
        <input type="submit" id="btn" name="btn" value="View Story"></input>
    </form>
</div>
<div id="story">
    <p>Rain was still lashing the windows, which were now <span class="adjective"> </span>, but inside all looked bright and cheerful. The firelight glowed over the countless <span class="adjective2"></span><span class="pluralnoun"></span> where people sat <span class="verb"></span>, talking, doing homework or, in the case of Fred and George Weasley, trying to find out what would happen if you fed a <span class="edibleobject"></span> to a <span class="monster"></span>. Fred had "rescued"...

CSS

.errorborder {
    border: 3px solid red;
}
span {
    color: blue;
    text-decoration: bold;
    font-style: italic;
}

JavaScript

$(document).ready(function () {
    $('#story p').hide();
    $('#form1').on('submit', function (event) {
        for (var i = 0; i < $('#form1 input').length; i++) //tyler suggested this to make it easier fo my error borders.
        {
            $('#form1 input').eq(i).removeClass("errorborder");
        }
        if (!formFilled()) {
            event.preventDefault();
        } else {
            $('span.adjective').html($('#form1 input#adjective').val());
            $('span.adjective2').html($('#form1 input#adjective2').val());
            $('span.pluralnoun').html($('#form1 input#pluralnoun').val());
            $('span.verb').html($('#form1 input#verb').val());
            $('span.edibleobject').html($('#form1 input#edibleobject').val());
            $('span.monster').html($('#form1 input#monster').val());
            $('span.adjective3').html($('#form1 input#adjective3').val());
            $('span.monster2').html($('#form1 input#monster2').val());
            $('span.verb2').html($('#form1 input#verb2').val());
            $('#story p').show();
            event.preventDefault(); //Tyler informed me this would stop the page from refreshing and deleting the inputted words.
        }

    });

    function formFilled() {
        var filled = true;

        for (var i = 0; i < $('#form1 input').length; i++) {
            if ($('#form1 input').eq(i).val() === "") {
                $('#form1 input').eq(i).addClass("errorborder");
                filled = false;

            }
        }
        return filled;
    }
});