Show hide image by generated id
<p>I have this code that generates a group ID with javascript. It's shown here: <a href="http://jsfiddle.net/LwtvK/5/" rel="nofollow">http://jsfiddle.net/LwtvK/5/</a>.
Now instead of it writing the text "Group id : X", I want it to control an image that gets shown. There are 7 group id's and 7 images</p>

<pre><code>    &lt;div data-role="content" id="pictures"&gt; 
        &lt;img src="images/image1.jpg" alt="image" id="pict1"&gt;
        &lt;img src="images/image2.jpg" alt="image" id="pict2"&gt;    
        &lt;img src="images/image3.jpg" alt="image" id="pict3"&gt;    
        &lt;img src="images/image4.jpg" alt="image" id="pict4"&gt;    
        &lt;img src="images/image5.jpg" alt="image" id="pict5"&gt;    
        &lt;img src="images/image6.jpg" alt="image" id="pict6"&gt;    
        &lt;img src="images/image7.jpg" alt="image" id="pict7"&gt;    
    &lt;/div&gt;
</code></pre>

<p>Now when the group id is 5, I want the 'Continue' button to hide images 1, 2, 3, 4, 6 and 7 and show image 5.
I was thinking of doing something like </p>

<pre><code>    function show_img(id)
    {
        if(id=='1')
        {
           $("#pict1").hide();
           $("#pict2").show();
        }
        else if(id=='2')
        {
            $("#pict2").show();
            $("#pict1").hide();
        }
    return false;
     } 
</code></pre>

<p>But that would result in a lot of retyping and I'm not really sure how to get it to work.
So, does anyone know how I can get the generated group ID to show the right image when the button is clicked?</p>
