I have 20 classes classname\_01 to classname\_20
I wold rather not have to write the same code 20 times because of the \_00 in the class name. The sample of my code is:

```
$('.tab_01').on('click',function(e) {
    $('#interactive_folder span').removeClass().addClass('folder_01');
    $(hideus).hide();
    $('img.folder_info_01 , .cte_01').show();
    e.preventDefault();
});
$('.tab_02').on('click',function(e) {
    $('#interactive_folder span').removeClass().addClass('folder_02');
    $(hideus).hide();
    $('img.folder_info_02 , .sub_title_02 , .cte_02').show()
    e.preventDefault();
});

```

Could someone advise a way to increment the number on the class names.

Edit Adding HTML

```
<div id="legend">
        <table id="layout_table" role="presentation">
        <tbody>
        <tr>
            <td><p data-id="01" class="legend_icon icon_01 tab">Legend 01</p></td>
            <td><p data-id="02" class="legend_icon icon_02 tab">Legend 02</p></td>
            <td><p data-id="03" class="legend_icon icon_03 tab">Legend 03</p></td>
        </tr>
        <tr>
            <td><p data-id="04" class="legend_icon icon_04 tab">Legend 04</p></td>
            <td><p data-id="05" class="legend_icon icon_05 tab">Legend 05</p></td>
            <td><p data-id="06" class="legend_icon icon_06 tab">Legend 06</p></td>
        </tr>
        </tbody>
        </table>
        </div>
      <div id="interactive_folder">
      <p class="folder_title">REPORT</p>
        <span class="folder_01"></span>
        <img src="../../img/folder_info_01.png" alt="" class="folder_info_01" width="457" height="524" />
        <div class="cte_01"><a class="popup_extlarge" href="" target="_blank"><img src="../../img/enlarge-01.png" width="175" height="108"></a></div>
        <p class="sub_title_02">Title 01</p>
        <div class="cte_02"><a class="popup_extlarge" href="" target="_blank"><img src="../../img/enlarge-02.png" width="175" height="108"></a></div>
        <img src="../../img/folder_info_02.png" class="folder_info_02" width="451" height="213" />
        <p class="sub_title_03">Title 02</p>
        <div class="cte_03"><a class="popup_extlarge" href="../../img/expense-budget-cost-centres.png" target="_blank"><img src="../../img/enlarge-03.png" width="175" height="108"></a></div>
        <img src="../../img/folder_info_03.png" class="folder_info_03" width="467" height="366" />
        <p class="sub_title_04">Title 03</p>
        <div class="cte_04"><a class="popup_extlarge" href="../../img/expense-budget-cost-centres.png" target="_blank"><img src="../../img/enlarge-04.png" width="175" height="108"></a></div>
        <img src="../../img/folder_info_04.png" class="folder_info_04" width="467" height="156" />
        <p class="sub_title_05">Title 04</p>
        <div class="cte_05"><a class="popup_extlarge" href="../../img/expense-budget-cost-centres.png" target="_blank"><img src="../../img/enlarge-05.png" width="175" height="108"></a></div>
        <img src="../../img/folder_info_05.png" class="folder_info_05" width="466" height="140" />
        <p class="sub_title_06">Title 05</p>
        <div class="cte_06"><a class="popup_extlarge" href="../../img/expense-budget-cost-centres.png" target="_blank"><img src="../../img/enlarge-06.png" width="175" height="108"></a></div>
        <img src="../../img/folder_info_06.png" class="folder_info_06" width="466" height="135" />
      </div>

```

New code is

```
var hideus = $('.folder_info_01, .folder_info_02, .folder_info_03, .folder_info_04, .folder_info_05, .folder_info_06, .sub_title_02, .sub_title_03, .sub_title_04, .sub_title_05, .sub_title_06, .cte_01, .cte_02, .cte_03, .cte_04, .cte_05, .cte_06');

$(hideus).hide();
$('.folder_info_01 , .cte_01').show();

$('.tab').on('click',function(e) {
    e.preventDefault();

    var $this = $(this),
        suffix = $this.data("id");

    $('#interactive_folder span').removeClass().addClass('folder_' + suffix );
    $(hideus).hide();
    $('img.folder_info_' + suffix + ' , .cte_' + suffix).show();
});

```