JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    
<h1>Character Creation</h1>

    <button id="create_char_btn">New Character</button>
    <form id="create_char_form" action="#">
        <label>Name:</label>
        <br />
        <input type="text" value="test" id="fname">
        <br />
        <label>Age:</label>
        <br />
        <input type="text" value="18" id="fage">
        <br />
        <label>Gender:</label>
        <br />
        <input type="text" value="male" id="fgender">
        <br />
        <label>Hair Color:</label>
        <br />
        <input type="text" value="brown" id="fhair_col">
        <br />
        <label>Eye Color:</label>
        <br />
        <input type="text" value="blue" id="feye_col">
        <br />
        <input type="button" value="Create" id="create_btn">

CSS

body, html {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    overflow: auto;
}
#create_char_form {
    display: none;
}

JavaScript

function Person(name, age, gender, hair_col, eye_col) {
    this.name = document.getElementById(name).value;
    this.age = document.getElementById(age).value;
    this.gender = document.getElementById(gender).value;
    this.hair_col = document.getElementById(hair_col).value;
    this.eye_col = document.getElementById(eye_col).value;
    alert(this.name + ' has been created');
    alert('CHARACTER INFO - \n\tname: ' + this.name + '\n\tage: ' + this.age + '\n\tGender: ' + this.gender + '\n\tHair Color: ' + this.hair_col + '\n\tEye Color: ' + this.eye_col);
}
$(document).ready(function () {
    $("#create_char_btn").click(function () {
        $("#create_char_form").css("display", "block")
    });
    $("#create_btn").click(function () {
        var createPerson = new Person(this.name, this.age, this.gender, this.hair_col, this.eye_col);
        createPerson;
    });
});