jQuery hiding/showing content -

when corresponding tab link clicked trying display content below, jquery below works in example: http://jsfiddle.net/jmqs9/

i need show content 2 '.tab-content'

it works first 1 , ignores second, im presuming issue because cant have multiple id's, know need fix this?

$(function () {      $('.tab-links li').click(function (e) {         e.preventdefault();         $('.tab-content > li').hide();         $('#' + $(this).data('num')).show();     });  }); 

use class insted of id

see demo

<ul class="tab-links">     <li data-num="1"><a href="#">tab one</a>      </li>     <li data-num="2"><a href="#">tab two</a>      </li> </ul> <ul class="tab-content">     <li class="1">content tab one</li>     <li class="2">content tab two</li> </ul>  <ul class="tab-content">     <li class="1">content tab 1 #2</li>     <li class="2">content tab 2 #2</li> </ul> 

js :

$(function () {  $('.tab-links li').click(function (e) {     e.preventdefault();     $('.tab-content > li').hide();     $('.' + $(this).data('num')).show(); });  });