How to create many toggle in runtime?

Question

I created a page that displays post with comments using ajax To view the comments user must click comment button correspond to the post For simple understanding, example:

In HTML Block

<button id="btn1">cmt1</button>
<button id="btn2">cmt2</button>

<div id="cmt1">comments</div>
<div id="cmt2">comments</div>

'

I tried of using for loop as

for(var i=0;i<count;i++){
    $("#cmt"+i).hide();
    $("#cmtbtn"+i).click(function(){
       $("#cmt"+i).toggle('slow');
    });
}

But It works well for the last cmtbtn only and whenever i click all other buttons last comment box only displays

I'm saying that is there is a way of for loop or any looping

Update: My Js file is here http://jsfiddle.net/9ss50nzc

Answer 1

Try to give a same and unique class to all "Comment Button" and also to "Comment Div". Like example bellow :

<button id="btn1" class="comtbtn"> cmt1 </button>
<button id="btn2" class="comtbtn"> cmt2 </button>
<div id="cmt1" class="comt-div">comments1</div>
<div id="cmt2" class="comt-div">comments2</div>

Then catch the click event on class "comtbtn" . Bellow is the js script to hide show of comment -

    $('.comtbtn').click(function() {
       var btnId = $(this).attr("id");
       var id = btnId.slice(-1);
       $( "#cmt"+id ).toggle( "slow" );
    });

Add css to hide all the comment section when initially loaded to the DOM.

    .comt-div{
      display:none;
    }