I am currently working on a website and this particular section requires the user to enter their details in a form. What I am trying to achieve is the following;

If the user hits the submit button and any fields are empty, I want a span element, which is initially set to CSS display none, to show up for each respective input field which has not been filled.

However, nothing seems to be happening when I click on the button. When I go to the console, it does not display any error message.

Can someone please assist? Many thanks.

HTML:

```
<!-- START OF 'YOUR DETAILS' FORM-->

<section>

    <div class="container">

        <h3>Step 3: Your Details</h3>

        <!-- SLIDE-IN DIV TO REPRESENT DAY PASS -->

        <div class="row chosenmembership">

        <div class="col-md-12 text-center" id="yourdetails">

            <form action="" method="">

                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="email" placeholder="Email Address" id="email" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Email is required!</span>
                </div>

                    <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" placeholder="Full Name" id="name" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Name is required!</span>
                    </div>

                    <div class="form-group">
                    <label for="number">Contact Number:</label>
                    <input type="tel" placeholder="Contact Number" id="number" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Contact Number is required!</span>
                    </div>

                    <div class="form-group">
                    <label for="postcode">Post Code:</label>
                    <input type="text" placeholder="Post Code" id="postcode" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Post Code is required!</span>
                    </div>

                    <div class="form-group">
                    <label for="dob">Date of Birth:</label>
                    <input type="tel" placeholder="DD/MM/YYYY" id="dob" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
DOB is required!</span>
                    </div>

                            </form>

                    <div class="form-group">
                    <input type="submit" id="submit" value="CONTINUE">
                    </div>

        </div>

    </div>

    </div>

</section>

<!-- END OF YOUR DETAILS FORM -->

```

JS / JQUERY:

```
$("#submit").click(function(){
        var $formValues = $(".your-details");
        var $warning = $(".warnings");
        $($formValues).each(function(index){
            if ($(this).val("")){
            $($warning[index]).css("display","block");
            }
        })
    })

```