JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://brain.netii.net/css/stylingSite.css">
<script src="http://brain.netii.net/js/jquery.min.js"></script>
<script src="http://brain.netii.net/js/validatious.min.js"></script>
<script src="http://brain.netii.net/js/centerContainer.js"></script>
<div id="container">
    <img src="http://brain.netii.net/images/Blank.png" id="pictures" name="pictures" />
    <form id="inputs" action="#" class="validate" method="post">
        <p>Please name your first three <b>associations</b> with regards to the object in the image:</p>
        <br>
        <br>
        <br>
        <div class="control-group">
            <label class="control-label" for="assoInput1">First association:</label>
            <div class="controls">
                <input required pattern="([a-z]*|[A-Z]*)*" type="text" id="assoInput1" name="asso1" title="please enter first association" autocomplete="off" value="">
            </div>
        </div>
        <br>
        <div class="control-group">
            <label class="control-label" for="assoInput2">Second association:</label>
            <div class="controls">
                <input required pattern="([a-z]*|[A-Z]*)*" type="text" id="assoInput2" name="asso2" title="please enter second association" autocomplete="off" value="">
            </div>
        </div>
        <br>
        <div class="control-group">
            <label class="control-label" for="assoInput3">Third association:</label>
            <div class="controls">
                <input required pattern="([a-z]*|[A-Z]*)*" type="text" id="assoInput3" name='asso3' title="please enter third association" autocomplete="off" value="">
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <!--<button type="submit" class="btn btn-primary">Next</button>-->
        <input type="submit" value="Submit">
    </form>
</div>

CSS

#container {
    width: 960px;
    padding: 0;
    margin: 0 auto;
    z-index: 0;
}
#pictures {
    width: 960px;
    height: 720px;
    padding: 0;
    z-index: 1;
}
#inputs {
    width: 960px;
    height: 720px;
    margin: 125px 50px;
    z-index: 10;
    display: none;
}

JavaScript

//declaration of global variables
var pictureImg = null;
var inputForm = null;
var arr = null;
var i = 1;
var plus = "http://brain.netii.net/images/Plus.png";

function preloader() {
    //counter
    var j = 1;

    console.log("preLoader start.");

    //create object
    imageObj = new Image();

    //set image list
    //images = new Array();

    //start preloading
    for (j = 1; j <= 100; j++) {
        imageObj.src = "http://brain.netii.net/images/Slide" + j + ".PNG";
        console.log("j: " + j);
        //console.log("preLoader time: " + performance.now());
    }

    imageObj.src = plus;

    console.log("preLoader end.");

}

function waitFunc(func, time) {
    console.log("waitFunction");

    var startTime = performance.now();

    console.log("start time: " + startTime);

    var currTime = performance.now();

    while ((currTime - startTime) <= (time / 1)) {
        //console.log(currTime - startTime);
        currTime = performance.now();
    }

    console.log("end time: " + currTime);

    func();
}

$(document).ready(function () {
    console.log("onload time: " + performance.now());

    //find both 2 divs we are goint to use
    pictureImg = document.getElementById("pictures");
    inputForm = document.getElementById("inputs");

    //blank both divs
    inputForm.style.display = "none";
    pictureImg.style.display = "none";

    preloader();

    //define new event hadler form form object
    $("#inputs").on('submit', function (e) {
        console.log("onSubmit");

        //stop form submission
        e.preventDefault();
        //each time submit button pressed stard this function
        showPlus();
    });

    //start "showPlus" function
    showPlus();
});

function showPlus() {
    console.log("showPlus");

    //display plus					
    pictureImg.src = plus;

    //blank only the form that contains input
    inputForm.style.display = "none";
    pictureImg.style.display = "block";

    //start "showPicture" function
   ...