JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <h2 align="center">WELCOME TO MAGIC WORD!</h2>
    <h3>Please enter your guess on the space below:</h3>
    <p>
        <input type="text" id="guestGuess" />
        <input type="submit" id="guessButton" />
    </p>
</p>
<p>
    <h3>Your guesses so far are: </h3>
    <p id="userGuesses"></p>
    <p id="guessesUsed">You have guessed: <span id="userAttempts"></span> times out six(6) chances.</p>
</p>

JavaScript

var numOfAttempts = 6;
var numOfGuesses = 0;
var magicWord = "Just";
var guess;

$("#guessButton").on("click",function(){
    if(numOfAttempts>0){
        guess = $("#guestGuess").val();
        if(guess==magicWord){
            alert('You guessed it');
        } else {
            numOfAttempts--;
            numOfGuesses++;
            $("#userGuesses").text($("#userGuesses").text()+guess+' ');
            $("#guestGuess").val('');
            $("#userAttempts").text(numOfGuesses);
            alert('Incorrect guess. Chances left: '+numOfAttempts);
        }
    }
})