title: Get the data-url correctly using javascript function
body: <p>I am creating a delete comment function and 
  this are the pieces of html for a delete comment functionality.</p>
  
  <pre><code>&lt;div id="comment-area"&gt;
    &lt;div class="list-border"&gt;
      &lt;small class="mdl-button delete-comment js-delete-comment pull-right" data-url="http://myproject.com/comment_controller/delete_comment/12/6"&gt;
        x
      &lt;/small&gt;
    &lt;/div&gt;
    &lt;div class="list-border"&gt;
      &lt;small class="mdl-button delete-comment js-delete-comment pull-right" data-url="http://myproject.com/comment_controller/delete_comment/13/6"&gt;
        x
      &lt;/small&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the function for delete a comment, which is automatically loaded when document is ready,</p>
  
  <pre><code>function delete_comment () {
    $('.delete-comment').click( function (e) {
      var url = $('.delete-comment').attr('data-url');
      $.ajax({
        url: url,
        type: 'get',
        dataType: 'json',
        success: function (data) {
          $('#comment-area').html(data.comments);
          delete_comment();
        },
        error: function () {
          alert('error');
        }
      });
    });
  }
  </code></pre>
  
  <p>The problem with this function from the given html above, if I'm going to click on <code>.delete-comment</code> with 
  <code>data-url="http://myproject.com/comment_controller/delete_comment/13/6"</code> take note on this <code>"13/6"</code>, the javascript function <code>delete_comment()</code>,
  in this line </p>
  
  <p><code>var url = $('.delete-comment').attr('data-url');</code> </p>
  
  <p>chose to get the <code>data-url="http://myproject.com/comment_controller/delete_comment/12/6"</code> take note also this <code>"12/6"</code>, to see the difference, instead of the <code>data-url</code> of <code>.delete-comment</code> I clicked.</p>
  
  <p>In short, this function always chose the <code>first-child div small</code>, whatever <code>small.delete-comment</code> I'm going to click.</p>
  
  <p>What was the best solution for this?</p>