I am trying to work out how to update the value of the table cell for each row using jQuery.

I basically update the `td#11_p` value from the table, but it's not updated. I tried following jQuery,

```js
$('#test').click(function() {
  var oldprirce = $("#11_p").val();
  $("#11_p").val(+(oldprirce) + +(15));
  jQuery("#PDList").trigger("liszt:updated");
})
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="pdsDetails" border=" 1px solid black" class="table table-bordered table-striped datatable  dt-responsive nowrap" style="width: 100%; ">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody id="PDList">
    <tr id="11_row">
      <td>PARACHUTE HAIR OIL 50ml</td>
      <td id="11_q">1</td>
      <td id="11_p">20</td>
    </tr>
    <tr id="12_row">
      <td>HAIR OIL 50ml</td>
      <td id="12_q">2</td>
      <td id="12_p">30</td>
    </tr>
  </tbody>
</table>

<button id="test">change</button>
```

<https://jsfiddle.net/SathishNcc/1dusLhrv/16/>