Jquery issue with popup window
<p>I'm having an issue with the popup window showing the last element the user clicked on instead of the current element. I have several different coupons that the user can click on to print. If for example, the user clicks on the coupon with an id of "test", nothing happens but when the user clicks a second time, the coupon appears. In this case, the "test coupon" continues to appear no matter which coupon is clicked. If the page is manually refreshed, then the user can click on a new coupon. What am I doing wrong?</p>

<pre><code>$(".coupon").click(function() {
    var id = $(this).attr("id");
    $('.pop').popupWindow({
        windowURL:'coupons/' + id + '.html'
    });
});
</code></pre>

<hr>

<pre><code>.coupon {
margin:10px;
height:152px;
width:193px;
position:relative;
cursor:pointer;
float:left;
}

.coupon .price {
margin-top:7px;
font-size:29px;
font-weight:bold;
color:white;
text-align:center;
}

.coupon .title {
margin-top:5px;
font-size:18px;
font-weight:bold;
color:black;
text-align:center;
font-family:'Times New Roman',Georgia,Serif;
}

&lt;div class="coupon pop" id="test1"&gt;
  &lt;div class="price"&gt;
    $5.00 OFF
  &lt;/div&gt;
  &lt;div class="title"&gt;
    Test
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="coupon pop" id="test2"&gt;
  &lt;div class="price"&gt;
    $5.00 OFF
  &lt;/div&gt;
  &lt;div class="title"&gt;
    Another test
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
