jQuery function to toggle multiple elements individually

Question

html code

<div>
<span class="share-start-url"><i class="fa fa-fw fa-link">test</i></span>
<div class="share-url" style="float: none;">http://impactne.ws/1OzGim8</div>
</div>

<div>
<span class="share-start-url"><i class="fa fa-fw fa-link">test</i></span>
<div class="share-url" style="float: none;">http://impactne.ws/1OzpL12</div>
</div>

jQuery code

jQuery(document).on("click", ".share-start-url", function(e){
    jQuery(".share-url").toggleClass("share-swipe");
    jQuery(".fa-link").toggleClass("share-back-highlighted");
    e.stopPropagation();
});

Currently when user clicks on first class, it opens all elements instead of individually. how do I fix it?

Answer 1

Use DOM traversal to toggle just the elements in the same DIV:

$(document).on("click", ".share-start-url", function(e) {
    var thisDiv = $(this).closest("div");
    thisDiv.find(".share-url").toggleClass("share-swipe");
    thisDiv.find(".fa-link").toggleClass("share-back-highlighted");
    e.stopPropagation();
});