Q:

Select first sibling of an element stored in a variable

I just want to select the "p" that comes after the selected input, but I tried a lot of combinations and none seems to work.
HTML:
<div id="formulario">
    <form id="contacto" action="" method="post">
        <label>Nombre </label>
        <input id="name" type="text" name="name"><br>
        <p class="error">Campo incorrecto</p>
        <label>Email</label> 
        <input id="email" type="text" name="email"><br>
        <p class="error">Campo incorrecto</p>
        <label>Teléfono</label> 
        <input id="phone" type="text" name="phone"><br>
        <p class="error">Campo incorrecto</p>
        <label>Mensaje</label>
        <textarea id="msg"name="message"></textarea><br>
        <input id="submit" type="submit" name="submit" value="Enviar">
    </form>
</div>

CSS:
.error {
    display: none;
}      

.error_show {
    color: red;
}

jQuery:
$("#contacto").submit(function(event) {
    var form_data = $("#contacto").serializeArray();
    var error_free = true;
    for (var input in form_data) {
        var element = $(form_data[input]['name']);
        var valid = element.hasClass("valid");
        var error_element = --->PROBLEM HERE<---
        if (!valid) {
            error_element.removeClass("error").addClass("error_show");         
            error_free = false;
        }
        else {
            error_element.removeClass("error_show").addClass("error");
        }
    }
    if (!error_free) {
        event.preventDefault(); 
    }
});

I can't use the class because it can be either "error" or "error_show".

A:

You can use element.next().next() but is force you to always have your p next to an input.
Best way to do would be having a specific class name for each p based on input name and then in your loop generate it dynamically to select it using a jQuery selector
HTML
<div id="formulario">
<form id="contacto" action="" method="post">
    <label>Nombre </label>
    <input id="name" type="text" name="name"><br>
    <p class="error error_name">Campo incorrecto</p>
    <label>Email</label> 
    <input id="email" type="text" name="email"><br>
    <p class="error error_email">Campo incorrecto</p>
    <label>Teléfono</label> 
    <input id="phone" type="text" name="phone"><br>
    <p class="error error_phone">Campo incorrecto</p>
    <label>Mensaje</label>
    <textarea id="msg"name="message"></textarea><br>
    <input id="submit" type="submit" name="submit" value="Enviar">
</form>

JS
for (var input in form_data){
    var element = $(form_data[input]['name']);
    var valid = element.hasClass("valid");
    var error_element = $("error_" + element.attr('name'));
    if (!valid) { error_element.removeClass("error").addClass("error_show"); error_free=false; }
    else { error_element.removeClass("error_show").addClass("error");}
}

