Question

I am using the function toggle with divs that are dynamically inserted, only instead of running only the specific element, the toggle execute all div content.

HTML:

<div style="text-align: center;">
    <p class="button-style add-comment"><a href="#">Add Comment</a></p>
    <div class="insert-comment" style="display: none;">
        <textarea rows="8" cols="50" class="insert-comment-text"></textarea>
    </div>
</div>

jQuery:

$(document).on('click', '.add-comment', function(e){
    $(".insert-comment").toggle(); 
});

How do I open just a specific div and not all?

Answer 1

Perhaps this is what you need?

$(this).next(".insert-comment").toggle();

In fact, if all elements with class add-comment are always followed by divs that need toggling, the second selector is just slowing you down:

$(document).on('click', '.add-comment', function(e){
    $(this).next().toggle();
});