Trigger Similar JQuery element on different span element

Question

So ideally what I want to have happen is trigger an identical function that I already have in my email span/form element, however I'm new to JQuery and can't quite wrap my head around it. Anyways, so in my email function, it essentially grabs the user input and and triggers the css class "form span error" which turns the span element red. Until the user inputs the "@" symbol, the "form span valid" is triggered. I would additionally like JQuery to trigger the "form span.error" rule on the productId forum/span element. Could please someone explain? Here's the CSS rule for the span:

#form span {
    border-radius: 20px;
    margin-left:15px;
    padding: 8px 35px;
    background: #FA5700;
    color:#faf3bc;
}
#form span.valid {
    background-color :#c0ce51;
    color: #faf3bc;
}
#form span.error {
    background-color:#b0240f;
    color: #faf3bc;
}

HTML/JQUERY:

   <form method="post" action="contact-thanks.php">

                    <p>
                            <label for="name">Name:</label>
                            <input type="text" name="name" id="name" class="required" value="<?php if (isset($name)) { echo htmlspecialchars($name); } ?>">
                            <span>Please enter your name</span>
                    </p>

                    <p>
                            <label for="email">Email:</label>
                            <input type="text" name="email" id="email" class="required" value="<?php if(isset($email)) { echo htmlspecialchars($email); } ?>">
                            <span>Please enter a valid email address</span>
                    </p>

                    <p> 
                            <label for="productId">Product Id:</label>
                            <input type="text" name="productId" id="productId" class="required" value="<?php if(isset($productId)) { echo htmlspecialchars($productId); } ?>">
                            <span>Please enter a ID number</span>
                    </p>
               <p class="submit">
                    <input type="submit" value="Submit" class="btn-submit">
                </p>
            </form>

</div>
<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        var $submit = $(".submit input");
        var $required = $(".required");
        function containsBlanks(){
            var blanks = $required.map(function(){ return $(this).val() == "";});
            return $.inArray(true, blanks) != -1;
        }
        //Checks for valid email
        function isValidEmail(email){
            return email.indexOf("@") != -1;
        }
        //Does not let the user submit if all text fields are not filled in
        function requiredFilledIn(){
            if(containsBlanks() || !isValidEmail($("#email").val())) 
                $submit.attr("disabled","disabled");
            else 
                $submit.removeAttr("disabled");
        }

        //Here's what I've tried, I'm playing around with it here for testing purposes
        //I'm afraid this syntax is terribly wrong  
        $("#productId").focus(function(){

            $(this).next().removeClass("valid").addClass("error");
        });
        $("#form span").hide();
        $("input,textarea").focus(function(){
            $(this).next().fadeIn("slow");
        }).blur(function(){
            $(this).next().fadeOut("slow");
        }).keyup(function(){
            //Check all required fields.
            requiredFilledIn();
        });

        $("#email").keyup(function(){
            //Check for a valid email.
            if(isValidEmail($(this).val()))
             $(this).next().removeClass("error").addClass("valid");
            else 
             $(this).next().removeClass("valid").addClass("error");
        });




        requiredFilledIn();
    </script>

Appreciate any help ahead of time!

Answer 1

After some simple experimenting, I figured it out. Here's the code if anyone is curious:

$("#productId").show(function(){
                $(this).next().fadeIn("slow").removeClass("valid").addClass("error");
            });