jquery - Click to show multiple element ref by id using javascript -

click show multiple element ref id using javascript

this code, click link click here show elements.

on first click click here want show one , 111 (it's same id number show_1)

and second click click here want show two , 222 (it's same id number show_2)

and third click click here want show three , 333 (it's same id number show_3)

and fourth click click here want show four , 444 (it's same id number show_4)

and fifth click click here want show five , 555 (it's same id number show_5)

but when test code, it's not work good. it's show only

one 2 3 4 5 

how can ?

http://jsfiddle.net/x53eh96o/12/

<style type="text/css">     div{     display: none; } </style> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody>   <tr>     <td valign="top" style=" width: 17%; ">        <div id="show_1">one</div>       <div id="show_2">two</div>       <div id="show_3">three</div>       <div id="show_4">four</div>       <div id="show_5">five</div>     </td>        <td valign="top" style=" width: 17%; ">        <div id="show_1">111</div>       <div id="show_2">222</div>       <div id="show_3">333</div>       <div id="show_4">444</div>       <div id="show_5">555</div>     </td>    </tr>        <tbody>       </table>      <div id="test_link" onclick="myfunction()" style="display: block;">click here</div>   <script>     var show = 0;     function myfunction() {         document.getelementbyid('show_' + (show += 1)).style.display = "block";             if(show == "5")         {             document.getelementbyid("test_link").style.display = "none";         }     } </script> 

first of id should unique, need use class instead. getting dom element class name use getelementsbyclassname(), returns array of dom objects.

var show = 0;    function myfunction() {    var div = document.getelementsbyclassname('show_' + (++show))    div[0].style.display = "block";    div[1].style.display = "block";      if (show == "5") {      document.getelementbyid("test_link").style.display = "none";    }  }

div {    display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">    <tbody>      <tr>        <td valign="top" style=" width: 17%; ">          <div class="show_1">one</div>          <div class="show_2">two</div>          <div class="show_3">three</div>          <div class="show_4">four</div>          <div class="show_5">five</div>        </td>        <td valign="top" style=" width: 17%; ">          <div class="show_1">111</div>          <div class="show_2">222</div>          <div class="show_3">333</div>          <div class="show_4">444</div>          <div class="show_5">555</div>        </td>      </tr>      <tbody>  </table>  <div id="test_link" onclick="myfunction()" style="display: block;">click here</div>

using jquery

var show = 0;    $("#test_link").click(function() {    $('.show_' + (++show)).css('display','block');    if (show == 5)      $(this).css('display','none');  });

div {    display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">    <tbody>      <tr>        <td valign="top" style=" width: 17%; ">          <div class="show_1">one</div>          <div class="show_2">two</div>          <div class="show_3">three</div>          <div class="show_4">four</div>          <div class="show_5">five</div>        </td>        <td valign="top" style=" width: 17%; ">          <div class="show_1">111</div>          <div class="show_2">222</div>          <div class="show_3">333</div>          <div class="show_4">444</div>          <div class="show_5">555</div>        </td>      </tr>      <tbody>  </table>  <div id="test_link" style="display: block;">click here</div>