title: How to show-or-hide image loader in the row that button clicked on it in jquery?
body: <p>I have a grid view with update panel and I set an image loader when the post back occur, But when I click on one button in for example row 5, all of loader display inline,but i just need to show the exactly image loader near my button that i click on it,How can I do that in j query or java script?  </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
                                     var prm = Sys.WebForms.PageRequestManager.getInstance();
                                     prm.add_beginRequest(BeginRequestHandler);
                                     prm.add_endRequest(EndRequestHandler);
  
                                     function BeginRequestHandler(sender, args) {
                                         //$(".load").show();
                                         $('.btn').live("click", function () {
                                             //$('tr [type="checkbox"]:checked').parent().parent().each(function () {
                                                 //if ($(this).find('input[id*="txtSalaryHead"]').length &gt; 0) {
                                                     //alert($(this).find('input[id*="txtSalaryHead"]').val() + "---" + $(this).find('input[id*="hdnHeadId"]').val())
                                                 //}
                                             $(".load").show();
                                             });
  
                                         //});
                                     }
  
                                     function EndRequestHandler(sender, args) {
                                         $(".load").hide();
  
                                     }
                                 &lt;/script&gt;  
  </code></pre>
  
  <p>and this my code:  </p>
  
  <pre><code>&lt;asp:Panel runat="server" ID="pnl1"&gt;
                                 &lt;asp:UpdatePanel ID="UpdatePanel3" runat="server"&gt;
                                     &lt;ContentTemplate&gt;
  
  
                                          &amp;nbsp;
                                         &lt;asp:Label ID="Label6" runat="server" Font-Bold="True" ForeColor="#D53B22"
                                             Text="تعداد : " Width="42px"&gt;&lt;/asp:Label&gt;
                                         &lt;asp:DropDownList ID="ddl_no" runat="server" CssClass="ddlno"&gt;
                                             &lt;asp:ListItem&gt;1&lt;/asp:ListItem&gt;
                                             &lt;asp:ListItem&gt;2&lt;/asp:ListItem&gt;
                                             &lt;asp:ListItem Value="3"&gt;&lt;/asp:ListItem&gt;
                                             &lt;asp:ListItem Value="4"&gt;&lt;/asp:ListItem&gt;
                                             &lt;asp:ListItem Value="5"&gt;&lt;/asp:ListItem&gt;
                                             &lt;asp:ListItem Value="6"&gt;&lt;/asp:ListItem&gt;
                                             &lt;asp:ListItem Value="7"&gt;&lt;/asp:ListItem&gt;
                                             &lt;asp:ListItem Value="8"&gt;&lt;/asp:ListItem&gt;
                                             &lt;asp:ListItem Value="9"&gt;&lt;/asp:ListItem&gt;
                                             &lt;asp:ListItem Value="10"&gt;&lt;/asp:ListItem&gt;
  
                                         &lt;/asp:DropDownList&gt;
                                         &amp;nbsp;
                                          &lt;asp:Button ID="btn_addBasket" runat="server" CssClass="btn"  Text="اضافه به سبد"  OnClick="btn_addBasket_Click" /&gt;
  
                                         &lt;img src="images/ajax-loader.gif" class="load" style="display:none;"/&gt;
                                     &lt;/ContentTemplate&gt;
                                 &lt;/asp:UpdatePanel&gt; 
                                 &lt;script type="text/javascript"&gt;
                                     var prm = Sys.WebForms.PageRequestManager.getInstance();
                                     prm.add_beginRequest(BeginRequestHandler);
                                     prm.add_endRequest(EndRequestHandler);
  
                                     function BeginRequestHandler(sender, args) {
                                         //$(".load").show();
                                         $('.btn').live("click", function () {
                                             //$('tr [type="checkbox"]:checked').parent().parent().each(function () {
                                                 //if ($(this).find('input[id*="txtSalaryHead"]').length &gt; 0) {
                                                     //alert($(this).find('input[id*="txtSalaryHead"]').val() + "---" + $(this).find('input[id*="hdnHeadId"]').val())
                                                 //}
                                             $(".load").show();
                                             });
  
                                         //});
                                     }
  
                                     function EndRequestHandler(sender, args) {
                                         $(".load").hide();
  
                                     }
                                 &lt;/script&gt;
                             &lt;/asp:Panel&gt;  
  </code></pre>
  
  <p>this code in my grid view template and i want show img with id=loader when my button(id=btn_addbasket) click</p>