title: unable to target clicked element on successful Ajax return, when multiple elements have same name
body: <p>i am trying to target 'clicked' element on successful Ajax return, when multiple elements have same class name.</p>
  <pre><code>  &lt;td data-name='tom' class=&quot;status&quot;&gt;&lt;a href=&quot;&quot;&gt;click&lt;/a&gt;&lt;/td&gt;
    &lt;td data-name='jack' class=&quot;status&quot;&gt;&lt;a href=&quot;&quot;&gt;click&lt;/a&gt;&lt;/td&gt;
    &lt;td data-name='phil' class=&quot;status&quot;&gt;&lt;a href=&quot;&quot;&gt;click&lt;/a&gt;&lt;/td&gt;
  </code></pre>
  <p>I am able to target the clicked element using this.i.e:</p>
  <pre><code>  var name  =  $(this).attr(&quot;data-name&quot;);
  </code></pre>
  <p>I am however unclear how to target that same element on successful ajax return.</p>
  <p>below is my ajax code example:</p>
  <pre><code>   $(&quot;.status&quot;).click(function(event){
              event.preventDefault();
              var name  =  $(this).attr(&quot;data-name&quot;);
  
              $.ajax({
                  url: FORM_URL,
                  type: &quot;POST&quot;,
                  data: {name:name},
                  showLoader: true,
                  cache: false,
                  success: function(data){
  
                      var el = $(this)('.status');
                      el.empty();
  
                          el.append(
                              '&lt;div class=&quot;status&quot;&gt;' +
                              '&lt;p&gt;name changed&lt;/p&gt;' +
                              '&lt;/div&gt;'
                          )
                      }
                  },
                
              });
              return false;
          });
  </code></pre>
  <p>The 'this' does not work on ajax success</p>