jquery show and hide some items in multiple list
<p>I am looking for help with jquery to show or hide some results(comment's replies) to the actual content without effecting the other elements.
The problem is that when I click show more all elements in every div show up at the same time.
How can I fix this issue?
Thank you
Gham </p>

<pre><code>// html5
&lt;div class="user_comments"&gt;
&lt;p&gt; This is the main comment ..... &lt;/p&gt;

&lt;article class="user_replies"&gt; &lt;p class="reply"&gt;  test2  &lt;/p&gt; &lt;/article&gt; 
&lt;article class="user_replies"&gt; &lt;p class="reply"&gt;  test   &lt;/p&gt; &lt;/article&gt;
&lt;article class="user_replies"&gt; &lt;p class="reply"&gt;  ok2    &lt;/p&gt; &lt;/article&gt; 
&lt;article class="user_replies"&gt; &lt;p class="reply"&gt;  ok1   &lt;/p&gt; &lt;/article&gt; 
&lt;article class="user_replies"&gt; &lt;p class="reply"&gt;  My first comment &lt;/p&gt; &lt;/article&gt;

    &lt;p class="viewMore"&gt; &lt;a href="#"&gt; view more &lt;/a&gt;  &lt;/p&gt; 
     &lt;p class="viewLess"&gt; &lt;a href="#"&gt; view less &lt;/a&gt;  &lt;/p&gt; 

 &lt;/div&gt;



&lt;div class="user_comments"&gt;
&lt;p&gt; This is the main comment ..... &lt;/p&gt;  

&lt;article class="user_replies"&gt; &lt;p class="reply"&gt; Thank you 1 &lt;/p&gt; &lt;/article&gt;  
&lt;article class="user_replies"&gt; &lt;p class="reply"&gt; Thanks  &lt;/p&gt; &lt;/article&gt; 
&lt;article class="user_replies"&gt; &lt;p class="reply"&gt; test  6 &lt;/p&gt; &lt;/article&gt;
&lt;article class="user_replies"&gt; &lt;p class="reply"&gt;  another test &lt;/p&gt; &lt;/article&gt;
&lt;article class="user_replies"&gt; &lt;p class="reply"&gt; test comment reply.&lt;/p&gt; &lt;/article&gt; 
&lt;article class="user_replies"&gt; &lt;p class="reply"&gt; My  reply to view more.&lt;/p&gt; &lt;/article&gt;
&lt;article class="user_replies"&gt; &lt;p class="reply"&gt; 4 reply &lt;/p&gt; &lt;/article&gt;
&lt;article class="user_replies"&gt; &lt;p class="reply"&gt; Third reply &lt;/p&gt; &lt;/article&gt; 
&lt;article class="user_replies"&gt; &lt;p class="reply"&gt; my second ... &lt;/p&gt; &lt;/article&gt;
    &lt;p class="viewMore"&gt; &lt;a href="#"&gt; view more &lt;/a&gt; &lt;/p&gt; 
     &lt;p class="viewLess"&gt; &lt;a href="#"&gt; view less &lt;/a&gt;  &lt;/p&gt; 

 &lt;/div&gt;

// This is jquery code: 
// Show more replies: 
$('.user_comments').find('.user_replies:gt(3)').hide();

$('.viewMore, .viewLess').click(function(e){
          e.preventDefault();
  $('.user_comments').find('.user_replies:gt(3)').slideToggle(500);

         if($(this).hasClass('viewLess') === true) {
                $('.viewMore').show(); 
                $('.viewLess').hide(); 

          } else {
                $('.viewLess').show(); 
                 $('.viewMore').hide();

                      }


 });// End of show more replies.

// CSS
.viewLess { display: none;}
</code></pre>
