jQuery save/edit button action only when button has a specific ID
<p>I have an HTML table(Dynamic) and a save/edit button on each row. On clicking save, the values needs to be collected to jQuery variables and AJAX POSTed to a PHP page. I am able to retrieve the values in 3 Table cells, but being a CSS counter, I am not able to get the value of the Sl:No column. It is important that I get this number. </p>

<h1>HTML TABLE</h1>

<pre><code>&lt;tr role="row" class="odd"&gt;
    &lt;td contenteditable="false" class="sorting_1"&gt;&lt;span class="sl"&gt; &lt;/span&gt; &lt;/td&gt;
    &lt;td contenteditable="false"&gt; &lt;span class="name"&gt;Alex Nilson &lt;/span&gt;&lt;/td&gt;
    &lt;td contenteditable="false"&gt;&lt;span class="price"&gt; 1234 &lt;/span&gt;&lt;/td&gt;
    &lt;td contenteditable="false"&gt; &lt;span class="qty"&gt;1234 &lt;/span&gt;&lt;/td&gt;
    &lt;td&gt;&lt;button class="pr_edit" href="javascript:;"&gt; Edit &lt;/button&gt;&lt;/td&gt;
    &lt;td&gt;&lt;button class="pr_elete" href="javascript:;"&gt; Delete &lt;/button&gt;&lt;/td&gt;

&lt;/tr&gt;
</code></pre>

<p>The jQuery function is as follows.</p>

<pre><code>$('#sample_editable_1').on('click', '.pr_edit', function() {
    var currentTD = $(this).parents('tr').find('td');


    var ino = $(this).closest('tr').find("span.sl").text();
    var iname = $(this).closest('tr').find("span.name").text();
    var iprice = $(this).closest('tr').find("span.price").text();
    var iqty = $(this).closest('tr').find("span.qty").text();

});
</code></pre>

<p>Following is the CSS code. <i> #sample_editable_1 </i> is the name of the table.</p>

<pre><code>  #sample_editable_1 tbody {
  counter-reset: tablerow;
}
#sample_editable_1 .sorting_1::before {
  counter-increment: tablerow;
  content: counter(tablerow)". ";

}
</code></pre>

<p>It all works perfectly except the following trouble.</p>

<ol>
<li>The sl span is a CSS counter. I am not being able to retrieve the value of this SPAN.</li>
</ol>