How to pass $(this) jquery object
<p>What I am trying to implement is like</p>

<p>1) I have one box which contains 1 item with remove icon</p>

<p>2) Click of remove icon I ap showing confirmation box build with boostrap model</p>

<p>3) Click of "Yes" I am removing item from box</p>

<p>Now the problem is like <strong>how can i pass $(this) of first remove icon</strong> ???</p>

<p>Code for remove is like </p>

<pre><code>&lt;a class="removepromo pull-left" data-code-name="test" data-rel="21468" href="javascript:void()"&gt;
&lt;i class="fa fa-remove remove-btn" title="Remove Promo"&gt;&lt;/i&gt;
&lt;/a&gt;
</code></pre>

<p>Now on the click of yes from model I want all the attributes of remove button</p>

<p>and here the click event binding of both (remove icon and model yes button) is different so how to pass $(this) object ???</p>

<p><strong>Current Solution</strong></p>

<p>I can post an answer because that's one of the ugliest ways to achieve it, that's what I think</p>

<pre><code>$('body').on('click','.apply_promo_code',function(e){
e.preventDefault();
var url = $(this).data('href');
// open model code, where I have taken yes and no button
//Code for yes button is like :
var btn ='&lt;div data-ref="'+url+'" class="btn confirm-btn confirm-left-btn removepromo_yes"&gt;Yes&lt;/div&gt;';
return false;
} 

$('body').on('click','.removepromo_yes',function(e){
e.preventDefault();
var url = $(this).data('ref');
 // all other stuff
} 
</code></pre>

<p><a href="https://i.stack.imgur.com/iY7Az.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iY7Az.png" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/lXPPe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lXPPe.png" alt="enter image description here"></a></p>