Untitled

<html>
<script src="jquery-3.3.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
var go = function() {
    //do some stuff here
    //alert();
    console.log ($(".clsAddress").val());
    console.log($("#name").val());
    //widgets


}
$(document).ready ( function(){
//makes sure this code only runs after the DOM is loaded

    $("#btnSubmit").click(go);//jQuery selector by ID
    $(".clsAddress").val("hello");//selector by class
    //$("h1").text("COOL JQUERY");//selector by tag name
    $("#wrapper").accordion();//accordion widget
    $("body").redHeaders();

}


);

//template to create your very own jQuery plugin
(function($) {
    $.fn.redHeaders = function() {
        //return "this" to make sure we support chaining
        //and iterate all selected elements
        //declare variables and objects here
        return this.each(function() {
            /*var headers= this.getElementsByTagName("h1");
            for(var i=0;i<headers.length;i++){
                headers[i].setAttribute("class","red");
            }*/
            $("h1").attr("class", "red");


            //most of your code will go here
        });
    };
})(jQuery);// invoke IIFE(immediately invoked function expression
//and import jQuery object. IIFE ensures variables will go
//out of scope as soon as the function completes so it won't
//clog up the global namespace
</script>
<style>
.red {
    background-color: red;
}
.white {
    background-color: white;
}
</style>
<body>
    <main>
        <div id="wrapper">
            <h1>Registration Form</h1>
            <div id="personal">
                <label>Name</label>
                <input type="text" id="name">

                <br>

                <label>Address:</label>
                <input type="text" class="clsAddress" id="address" ><br>

                <label>Phone Number:</label>
                <input type="text" id="phonenum" ><br>

                <label>Email Address:</label>
                <input type="text" id="email" ><br>

                <label>Birth Date:</label>
                <input type="text" id="birthdate" ><br>
                <input type="button" value="Submit" name="btnSubmit" id="btnSubmit"><br>

            </div><!--end content div-->
            <h1>Billing info</h1>
            <div id="personal">
                <label>Credit Card Number:</label>
                <input type="text" id="ccnum" ><br>
                <label>Expiry Date:</label>
                <input type="text" id="ccexpiry" ><br>
                <label>CVV:</label>
                <input type="text" id="cvv" ><br>
            </div><!--end personal data-->
        </div><!-- end wrapper div-->
    </main>
</body>
</html>