Giving Ajax Tabs unique ID's
<p>Ok this fiddle is very basic. But kind of shows the issue I am having, I have purposely not changed the ajax tabs sub ids to highlight the issue.</p>

<p><a href="http://jsfiddle.net/ozzy/u5xyR/1/" rel="nofollow">http://jsfiddle.net/ozzy/u5xyR/1/</a></p>

<p>Essentially, we have a page with Ajax Tabs. In the example above, you will see. Now if you click on contact, you should see two sets of sub tabs appear.</p>

<p>The issue I am having, is:</p>

<pre><code>&lt;div class="tabscontainerTwo"&gt;
</code></pre>

<p>We need to generate this dynamically and economically, so that we use the least amount of js and the js appends the id to the tab class.</p>

<p>Perhaps I am not explaining this well.</p>

<p>This is how it should work ( and we may have MULTIPLE sets of sub ajax tabs on one page )</p>

<p>User clicks CONTACT tab.
The contact pane, displays, with sub ajax tabs underneath. These must all work independantly of each other and not collide ( code wise ) - there could be up to 12 of these sub tabs in each singular tab.(like contact)</p>

<p>I am not sure but I think its because all of these sub tabs share the same classes. So perhaps changing: </p>

<pre><code>$(".tab_contentTwo") 
</code></pre>

<p>to</p>

<pre><code>$("#tab_content-2") $("#tab_content-3")
</code></pre>

<p>etc is the way to go, the issue I am having then is how to control and append the ID to each of the tabs, and control it all with the css... because it all gets a bit messy.</p>

<p>I am no good with JS and this code is kind of a port of SOHTANAKAS code. </p>

<p>Any help appreciated.</p>

<p>An example of what we want to achieve is like this: <a href="http://mozo.com.au/home-loans" rel="nofollow">http://mozo.com.au/home-loans</a></p>

<p>Click on the Click For More Info link , theres plenty of them on the page... and they all have their own subset of ajax tabs, looking at the code, these all have unique ids. So wondering how we can nest that correctly with Javascript.</p>
