Question

I have this JQuery code

jQuery(\'.tpcoupon-reveal\').click( function() {
jQuery(\'.inner-code\').css(\'background-color\',\'#FFF\');
jQuery(\'.inner-code\').text(jQuery(this).attr(\'caption\'));
visitstore = jQuery(this).attr(\'url\');
window.open(visitstore);
    });

$newText = '

            <div class="tpcoupon-code-wrapper">
                <span class="tpcoupon-msg"> '.tpbox2_unhtmlentities($content).'</span>
                <span class="tpcoupon-reveal" caption="'.$couponcode.'" url="'.$url.'">Vis koden & besøg siden</span>
                <span class="tpcoupon-code-show">
                    <span class="inner-code"></span>
                </span>
            </div>
            <div class="clr"></div>
';

Due to this code when I click on span object with id tpcoupon-reveal it shows me code in span object with id inner-code
The problem is that I have many blocks in one page. But when I click one span it opens all codes in all span with id=inner-code
How to make JQuery to open only this block?

Answer 1

Try scoping the jQuery seletor for ‘.inner-code’ by doing this inside the click handler:

$(this).parent().find('.inner-code')