Selecting sibling input box depending on if they've entered details in previous input
<p>I am using the following code:</p>

<pre><code>$.each($('.friendName'), function(){
    if($(this).val() != ''){
        var idName = $(this).attr('id');
        var name = $(this).val();
        var email =  $('#' + idName + ' ~ input').first().val();
        alert(email);
    }
});
</code></pre>

<p>This code should go through each element with a class of <code>friendName</code> (3 input boxes).</p>

<p>Ones that aren't empty, I then want it to find the associated friendEmail input box. For example:</p>

<pre><code>friendName1 - friendEmail1
friendName2 - friendEmail2
friendName3 - friendEmail3
</code></pre>

<p>This should only get results for items that contain details, if only <code>friendName1</code> and <code>friendEmail1</code> are filled out, it doesn't count the rest of them.</p>

<p>For some reason, I can't get it to get the value of the <code>friendEmail</code> input, I'm guessing because it is not a sibling.</p>

<p>Any help would be greatly appreciated, and if you could advance on my code so that it checks to see if each <code>friendName</code> and <code>friendEmail</code> contain values, then returns them as <code>var name</code> and <code>var email</code>, that'd be great.</p>

<pre><code>&lt;div&gt;
    &lt;label for="friendName1"&gt;Friend's Name&lt;/label&gt;
    &lt;input type="text" id="friendName1" name="friendName1" class="friendName" value="" /&gt;
&lt;/div&gt;

&lt;div&gt;
    &lt;label for="friendEmail1"&gt;Friend's Email&lt;/label&gt;
    &lt;input type="text" id="friendEmail1" name="friendEmail1" value="" /&gt;
&lt;/div&gt;

&lt;div&gt;
    &lt;label for="friendName2"&gt;Friend's Name&lt;/label&gt;
    &lt;input type="text" id="friendName2" name="friendName2" class="friendName" value="" /&gt;
&lt;/div&gt;

&lt;div&gt;
    &lt;label for="friendEmail2"&gt;Friend's Email&lt;/label&gt;
    &lt;input type="text" id="friendEmail2" name="friendEmail2" class="friendEmail" value="" /&gt;
&lt;/div&gt;

&lt;div&gt;
    &lt;label for="friendName3"&gt;Friend's Name&lt;/label&gt;
    &lt;input type="text" id="friendName3" name="friendName3" class="friendName" value="" /&gt;
&lt;/div&gt;

&lt;div&gt;
    &lt;label for="friendEmail3"&gt;Friend's Email&lt;/label&gt;
    &lt;input type="text" id="friendEmail3" name="friendEmail3" class="friendEmail" value="" /&gt;
&lt;/div&gt;
</code></pre>
