javascript - JQuery and HTML Getting the value of a <td> from the every first <tr> of a table to increment it -

i have html table provide data mysql server, , have inital tr contains text boxes add more. , append them same table.

the problem first td of each row should increment.

so if last td value 5, when add new row , append new line, it's first td value should 6.

here html table:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table>  <tr id="after_tr">          <th colspan="4" style="text-align: center">diabetes assessment result patient <?php echo $res[0]['patient_name_en'] ?></th>         </tr>         <tr class="bg-info">           <th>#</th>           <th>date of assessment</th>           <th>assessment result</th>           <th colspan="5" style="text-align:center">actions</th>         </tr>         <?php $i = 1; foreach($res $result) { if($result['date_of_assessment']!="") { ?>         <tr>           <td style="text-align: center"><?php echo $i++ ?></td>           <td><?php echo $result['date_of_assessment'] ?></td>           <td><?php echo $result['assessment_result'] ?></td>           <td><button type="button" class="btn btn-danger" name="delete_assessment" id="delete_assessment"><i class="fa fa-remove"></i></button></td>         </tr>         </table>

here table data:

so if added line, should 2 new row.

i tried:

console.log($('td:first-child').text()) 

and got empty result. tried

$('tr').parent().siblings(":first").text() 

and again empty result.

i'm not sure js code adding row looks like, how it.

$('#addrow').on('click', function() {    // last tr    var $lasttr = $('tr').last();        // text first td of last tr    var firsttdtext = $lasttr.children('td').first().text();        // try increment number    var newtdtext = '-';    try { newtdtext = parseint(firsttdtext) + 1; } catch(e) {}      var buttonhtml = '<button type="button" class="btn btn-danger delete_assessment" name="delete_assessment"><i class="fa fa-remove"></i></button>';      // create new tr, append tds , insert tr after last tr    $('<tr>')      .append($('<td>').css('text-align','center').text(newtdtext))      .append($('<td>').text('some date'))      .append($('<td>').text('some number'))      .append($('<td>').html(buttonhtml))      .insertafter($lasttr);  });

/* these styles aren't needed of course, added because looked little packed in example */  th, td {    padding: 6px !important;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table>    <tr id="after_tr">      <th colspan="4" style="text-align: center">diabetes assessment result patient x</th>    </tr>    <tr class="bg-info">      <th>#</th>      <th>date of assessment</th>      <th>assessment result</th>      <th colspan="5" style="text-align:center">actions</th>    </tr>    <tr>      <td style="text-align: center">1</td>      <td>2017-07-28</td>      <td>70</td>      <td><button type="button" class="btn btn-danger delete_assessment" name="delete_assessment" id="delete_assessment"><i class="fa fa-remove"></i></button></td>    </tr>  </table>  <button id="addrow">add row</button>

a little note. see you're using id delete button. make sure ids unique or use class instead.