jQuery - find multiple associated classes using the last digit of the class?
<p>I have the following HTML code:</p>

<pre><code>            &lt;fieldset&gt;
                &lt;legend&gt;&lt;span&gt;Contact Details&lt;/span&gt; &lt;span class="edit1"&gt;Edit&lt;/span&gt;&lt;span class="hide1"&gt;Hide&lt;/span&gt;&lt;/legend&gt;
                &lt;div&gt;
                &lt;!--content--&gt;
                &lt;/div&gt;
            &lt;/fieldset&gt;


            &lt;fieldset&gt;
                &lt;legend&gt;&lt;span&gt;Contact Details&lt;/span&gt; &lt;span class="edit2"&gt;Edit&lt;/span&gt;&lt;span class="hide2"&gt;Hide&lt;/span&gt;&lt;/legend&gt;
                &lt;div&gt;
                &lt;!--content--&gt;
                &lt;/div&gt;
            &lt;/fieldset&gt;  
</code></pre>

<p>The spans with the class "hide1" and "hide2" are set to display:none on page load.</p>

<p>Within this code, using jQuery, I am trying to do the following:</p>

<ul>
<li>if edit1 is clicked on, this span becomes hidden, and the associated span with the class "hide1" becomes visible.</li>
<li>This should be the same for all other spans in the code e.g. edit2 and hide2. Also if I want to add further edit and hide classes, the function should be able to handle this too e.g. edit3 and hide3 and so on.</li>
</ul>

<p>So far, I have been able to find the edit span that is clicked on and hide it. I am struggling to get the associated "hide" class. Can anyone help me do this please? Here is my jQuery function so far:</p>

<pre><code>        var spans = $("#myIntForm").find("span[class^='edit'],span[class^='hide']");

        spans.click(function() {
            var $this = $(this);
            spans.filter("span[class^='hide']").hide();
            if($this.attr('class').substr(0,4)=='edit')
                {
                    var visible = $this.filter("span[class^='"+$this.attr('class').substr(0,4)+"']");
                    visible.hide();

                    //find the class 'hide' with same ending number as class 'edit' and display it.
                    var invisible;
                }
        });
</code></pre>
