JSFiddle - React, Tailwind, and code Playground

HTML

<div class="askComment">
    <h2>Submit new comment</h2>
    <!--comment form -->
    <form id="form" method="post">
        <!-- need to supply post id with hidden fild -->
        <input type="hidden" name="postid" value="<?php echo $post; ?>">
        <input type="hidden" name="type" value="A">
            <p>Hello <strong><?php echo $fname; ?></strong> what do you have to say</p>
            <input type="hidden" name="fname" id="comment-name" value="<?php echo $fname; ?>" >
            <input type="hidden" name="userid" id="comment-mail" value="<?php echo $UserId; ?>" >
            <p>Your comment *</p>
            <textarea name="comment" id="comment" cols="30" rows="10" placeholder="Type your comment here...." ></textarea>
            <div id="error"></div>
        <input type="submit" id="submit-comment" name="submit" value="Submit Comment">
    </form>
    </div>

JavaScript

$("#submit-comment").attr('disabled',true);

    var swear = new Array();
    swear[0] = "jelly";
    swear[1] = "trumpet";
    swear[2] = "chocolate";

    $("#comment").on( "keyup",function() {

        var comment = $("#comment").val();
		
		
		
		word=comment.split(' ');
		
		
        
        for(i=0;i<word.length;i++) {
			
			worda=word[i].trim();
			
			worda=worda.replace(/\.|,|!|:| |;|\?|\r?\n/g ,'');
			
			console.log(worda);

        if ($.inArray(worda,swear)!=-1) {
            $("#error").html('<font color="red">Please rewrite <strong>bad</strong> word found.</font>');
			$("#submit-comment").attr('disabled',true);
			break;
        } 
        else {
             $("#error").html('');
          $("#submit-comment").attr('disabled',false);
        }
		}
		

    });