JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<!-- Spy phone-->
        <div id="spyphonectrl" style="position: fixed; top: 2%; right: 2%;">
            <button id="showspyphone" class="btn" style="color: white;">Hide/Show Spy Phone</button>

            <div id="spyphone" class="spyphone">
                <p style="color: white;">Enter the code you got from passing the test.</p>

                <input type="text" id="loomynarty" style="width: 100px;">
                <button id="buttonthingy">Submit code</button>

                <div id="spookystuff">
            <button id="messagebutton"class="spyphonebutton">Messages</button>
            <div id="messages">
                <p>hai</p>
            </div>
            <button id="exit">Exit</button>
    
        </div>
    </div>
            </div>

JavaScript

//Alexander Dixon 07-06-2015
//http://stackoverflow.com/questions/31258777/if-statement-not-hiding-elements-and-showing-elements-when-evaluated-to-true - Solution
//Hide if Specific Value on Click

$(document).ready(function () {
	jQuery("input#loomynarty").val("DFF8GY8333");
	var hideProblem = setInterval( function() {		
        if($("#loomynarty").length > 0 && $("input#loomynarty").val() === "DFF8GY8333")
        {
            $("#buttonthingy").css("background-color", "red");
            $("#buttonthingy").click(function () { // THIS IS THE PROBLEM
                $("#loomynarty").hide(); // DOES NOT HIDE INPUT ELEMENT
                $("#buttonthingy").hide(); // DOESN'T HIDE SUBMIT BUTTON
                $("#spookystuff").show(); // DOESNT SHOW MAIN SPYPHONE STUFF
            });  
        } else {
            //clearInterval(hideProblem);
        }
	//return hideProblem;
	}, 500);
	
	//$("#spyphone").hide();
	//$("#showspyphone").click(function () {
	//	$("#spyphone").toggle();
	//	$("#spookystuff").hide();
	//});
    //
	//$("#messages").hide();
	//$("#exit").hide();
	//$("#messagebutton").click(function () {
	//	$("#exit").show();
	//	$("#messages").show();
	//});
    //
	//$("#exit").click(function () {
	//	if ($("#messages").is(":visible")) {
	//		$("#messages").hide(); 
	//		$("#exit").hide(); 
	//	}
	//});
	//
	//$("#spyphone").hide();
	//$("#showspyphone").click(function () {
	//	$("#spyphone").toggle();
	//	$("#spookystuff").hide();
	//});
    //
	//$("#messages").hide();
	//$("#exit").hide();
	//$("#messagebutton").click(function () {
	//	$("#exit").show();
	//	$("#messages").show();
	//});
    //
	//$("#exit").click(function () {
	//	if ($("#messages").is(":visible")) {
	//		$("#messages").hide(); 
	//		$("#exit").hide(); 
	//	}
	//});	
});