Multiple tabs with same names?

Multiple tabs with same names?

Hey guys,

I'm having a problem with tabs. I have the following structure: 

  1. <div id="section-1">
  2. <ul>
  3.       <li><a href="#tab-1"><span>First Tab</span></a></li>
  4.       <li><a href="#tab-2"><span>Second tab</span></a></li>
  5.       <li><a href="#tab-3"><span>Third tab</span></a></li>
  6. </ul>
  7. <div id="tab-1">
  8. content here
  9. </div>

  11. <div id="tab-2">
  12. content here
  13. </div>

  15. <div id="tab-3">
  16. content here
  17. </div>

  19. </div>

  21. <div id="section-2">
  22. <ul>
  23.       <li><a href="#tab-1"><span>First Tab</span></a></li>
  24.       <li><a href="#tab-2"><span>Second tab</span></a></li>
  25.       <li><a href="#tab-3"><span>Third tab</span></a></li>
  26. </ul>
  27. <div id="tab-1">
  28. content here
  29. </div>

  31. <div id="tab-2">
  32. content here
  33. </div>

  35. <div id="tab-3">
  36. content here
  37. </div>

  39. </div>
How can i have different tabs, under different DIVs, with same names?