Trying To Select Single Elements Within A Class. Not Working With "jquery(this).next"

I am trying to select only one element with the class name postcode-overlay-not using jQuery(this).next() which has worked for me in similar situations in the past. This time it do

Solution 1:

.next() gets just the very next DOM node, then compares it with the class(es) you've specified.

In your case, you've specified multiple, hierarchical classes which will never match a single node.

As you've not provided the HTML structure, here are some ideas to replace the .next():

jQuery(".help-container .delivery-options__option .postcode-restrictions-not").click(function() {

    // remove (this) and just get from the top again// will likely match multiplejQuery(".help-container .delivery-options__option .postcode-overlay-not").fadeIn("slow");

    // Use (this).next, assuming the next is *exactly* as specified// unlikely, but dependsjQuery(this).next(".postcode-overlay-not").fadeIn("slow");

    // Use nextAll().first()// will work if they are siblingsjQuery(this).nextAll(".postcode-overlay-not").first().fadeIn("slow");

    // Use up to shared parent, then down// most likely to work, but depends on where others arejQuery(this).closest(".delivery-options__option").find(".postcode-overlay-not").fadeIn("slow");

});