# Need help having two Javascript news filters on same page

**URL:** https://forum.kirupa.com/t/need-help-having-two-javascript-news-filters-on-same-page/331751
**Category:** web dev
**Created:** [October 12, 2013, 7:34pm UTC](https://forum.kirupa.com/t/need-help-having-two-javascript-news-filters-on-same-page/331751 "2013-10-12T19:34:34Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![spindrift](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@spindrift](https://forum.kirupa.com/u/spindrift)
#### Post date: [October 12, 2013, 7:34pm UTC](https://forum.kirupa.com/t/need-help-having-two-javascript-news-filters-on-same-page/331751/1 "2013-10-12T19:34:34Z")

</div>

Hi guys,

I’m using the below code to create a news filter for my site and it all works fine.

However, I want to have two separate news filters on the same page.

Can anyone tell me how I could go about either editing the Javascript or adding a separate code for another set.

Thank you very much and I hope to hear from you.

SM 🙂

```auto

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  
<style type='text/css'>
    .buttons .selected {
    color: red;
}

</style>
  

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
});
$('.showSingle').first().click();

});//]]>  

</script>

<div class="buttons">
    <a class="showSingle" data-target="1">Option 1</a>
    <a class="showSingle" data-target="2">Option 2</a>
    <a class="showSingle" data-target="3">Option 3</a>
    <a class="showSingle" data-target="4">Option 4</a>
    <a class="showSingle" data-target="5">Option 5</a>
    <a class="showSingle" data-target="6">Option 6</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>
<div id="div5" class="targetDiv">Lorum Ipsum 5</div>
<div id="div6" class="targetDiv">Lorum Ipsum 6</div>

```