display php echo output in popup window

I have the following code that outputs terms & conditions data (agb) for a specific vendor using php echo in a pop-up window. This works fine as long as there is only one vendor. When additional vendors are listed, the displayed data in the new window is the same as for the first vendor.

As far as I understand javascript is executed outside of the PHP and therefore the value of the string output is not updated (because ofmissing target?) and refers always to the first vendor, i.e. the JavaScript code will always fill the new window with the same content.

I think I need to pass a vendor ID or similar to the javascript function. But how can I achieve this?

PHP

<?php if ($_v->getId()): ?>  
<p>Seller: <?php echo $_v->getVendorName() ?> </p>  
<a href="" class="new-window">terms & conditions</a> 

<div style="display:none;">
    <div id="agb-text"><?php echo $_v->getData('agb')?></div>
</div>

JS:

<script type='text/javascript'>    
    jQuery(function($) {
        $('a.new-window').click(function(){

        var recipe =  window.open('','PrintWindow','width=600,height=600');
        var html = '<html><head><title>AGB</title></head><body><div id="my-id">' + $('<div />').append($('#agb-text').clone()).html() + '</div></body></html>';
        recipe.document.open();
        recipe.document.write(html);
        recipe.document.close();

    return false;
    });
});
</script>

Solution

The reason you are always getting the same text in the pop up is because your div which holds the text has the same ID of agb-text, and there can only be 1 ID set with that name, others will be ignored. So you would be better of using classes and data attributes.

You can do that like this:

<?php if ($_v->getId()): ?>  
<p>Seller: <?php echo $_v->getVendorName() ?> </p>  
<a href="" class="new-window" data-vendor="<?php echo $_v->getVendorID();?>">terms & conditions</a> 

<div style="display:none;">
    <div id="agb-text-<?php echo $_v->getVendorID();?>"><?php echo $_v->getData('agb')?></div>
</div>

<script type='text/javascript'>    

    jQuery(function($) {
        $('a.new-window').click(function(){
            var vendorID = $(this).data("vendor");
            var recipe =  window.open('','PrintWindow','width=600,height=600');
            var html = '<html><head><title>AGB</title></head><body><div id="my-id">' + $('<div />').append($('#agb-text-' + vendorID).clone()).html() + '</div></body></html>';
            recipe.document.open();
            recipe.document.write(html);
            recipe.document.close();

            return false;

        });
    });

</script>

I used the $_v->getVendorID() function as I'm assuming you have it, but if you don't, create one or use something that suits you better to generate a unique value for each vendor.

Sretno :)