how to do following task using jQuery?
<p>The following code is given by one of user and friend on stackoverflow as solution for my problem.
HTML Code</p>

<pre><code>&lt;img src="https://s3.amazonaws.com/twitter_production/a/1265328866/images/twitter_logo_header.png"/&gt;

&lt;input type="text"/&gt;
&lt;input type="text"/&gt;
&lt;input type="text"/&gt;
&lt;input type="text"/&gt;

&lt;div class="sample"&gt;
  &lt;img src="http://sstatic.net/so/img/logo.png"&gt;
  &lt;img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"&gt;
  &lt;img src="http://cacm.acm.org/images/logo.ACM.gif"&gt;
  &lt;img src="http://static03.linkedin.com/img/logos/logo_linkedin_88x22.png"&gt;
&lt;/div&gt;
</code></pre>

<p>JQUERY Code</p>

<pre><code>$(function () {
    var textboxes = $("input:text"), //gets all the textboxes         
        images = $(".sample img");   //gets all the images

    images.not(":first").hide(); //hide all of them except the first one
    textboxes.each(function (i) {
        var j = i;
        $(this).focus(function () {
            images.hide().eq(j).show();
        });
    });
});
</code></pre>

<p>The above code shows image related to text box which has focus and hides rest of the all three images at the same time.</p>

<p>The above process goes on sequentially that is for first text box first image is visible, for second text box send image is visible in this way. 
Now the problem is I want to show  1. when focus comes to first text box first image is visible
2. When focus comes to second text box second image is visible
3. when focus comes to third text box i want the second image as it is visible 
in this way after 4 and fifth text box when sixth text box comes again the third image should be visible.</p>

<p><strong>QUE 1. Is it possible to show the image as i want but using loop as in above code and identifying the text box using jquery? or i have to write seperate functions for each text box?</strong></p>

<p>There is not only the text boxes but also  group of radio buttons, select boxes, and group of check boxes too in between text boxes so when focus comes to these radio buttons or select boxes or check boxes the related image to them should get visible. so</p>

<p><strong>Que 2. How can I distinguish between the images for above controle ?</strong> </p>

<p>Que 3. what following line will do in the code and How its get executed means which function is executed first then which second in this way?
            images.hide().eq(j).show();</p>

<p>Please reply for above questions as in depth as you can because i am new to jquery. and i want to know how it works
Thank You</p>
