How to add Javascript in Drupal 7 with jQuery?

I am trying to provide the option that users be able to put comment under each paragraph. So at the end of the article, I have something like this:

Comments for paragraph 1

  /* here I show the comment for paragraph 1 */

Comments for paragraph 2

  /* here I show the comment for paragraph 2 */

Comments for paragraph 3

  /* here I show the comment for paragraph 3 */

so I have added the following to node.tpl.php:

    for($b=1;$b<$number;$b++)
   {   
         echo "Commentsfor Paragraph $b:" ."<br>" . "<br>" ;  

        foreach($cid_numbers as $no)
          {    

             $e=($content['comments']['comments'][$no]['#comment']->paragraph_id);   
             if($e==$b)   
             print render($content['comments']['comments'][$no]);  

           }   
        }

and it works. But now I want to hide the comments and only when users clicks on a link like: Comments for paragraph 1, then he be able to see the comments.

In order to do that I have added the following to node.tpl.php file:

 <script type="text/javascript">
     (function($) {
        $(document).ready(function(){
           $(".toggler").click(function(){
            $(this).next().slideToggle("slow");
            return false;
          }).next().hide();
        });
    })(jQuery);
  </script>

and also changed the first code to this:

    for($b=1;$b<$number;$b++)
   {  ?>  
  <p class="toggler" style="cursor:pointer;"><?php echo "Commentsfor Paragraph $b:" ."<br>" . "<br>" ; ?> </p> <div> 
 <?php
   foreach($cid_numbers as $no)
    {    

  $e=($content['comments']['comments'][$no]['#comment']->paragraph_id);   
   if($e==$b)   
    print render($content['comments']['comments'][$no]);  

   }   ?> </div> <?php   

   }

This is the website that gave me the idea that how to do the hide/show: http://renaudjoubert.com/en/article/how-add-javascript-drupal-7-jquery?utm_source=twitterfeed

But the output looks like this:

comments for paragraph 1

 here it show comments for paragraph 3

comments for paragraph 4

and then when I click on the link "comments for paragraph 1" then it displays the comments for paragraph 1 and also the link " comments for paragraph 2". So what is my mistake? Have I put tag in the right place? Or do you have any suggestion that how can I hide comments and show them when click on the link?