localStorage variable becomes Undefined-CodePudding

So I have a table that is populated by php from mysql database, in my table I have an editable cell using contenteditable attribute. What I'm trying to achieve is that when focused on the cell the check button for the row should appear and after focusing out the button will disappear and the data in the will return to the original value since it is not save in the database unless the check button will be clicked. so far my code do as expected however after clicking the cells in the column for several times it displays undefined in the cell. Can someone help me? is there any other way to do this? here's my html code:

<?php session_start(); 
include '../assets/back-end-includes/DB-connection.php';
$selectsizeQuery="SELECT * 
                  FROM `sizetable` ";
$selectsizeResult=filtertable($selectsizeQuery);
?>
<div >
                  <div >
                    <div >
                      <table  id="dataTable">
                        <thead>
                          <tr>
                            <th scope="col">Size</th>
                            <th scope="col">Action</th>
                          </tr>
                        </thead>
                        <tbody  id="tableBody">
                        <?php 
                        while($row=mysqli_fetch_array($selectsizeResult)){
                        ?>
                        <tr>
                          <td contenteditable >
                            <input type="text"  value="<?php echo $row['sizeID']; ?>" hidden>
                            <strong ><?php echo $row['sizeName']; ?></strong>
                          </td>
                          <td>
                              <button type="button"  name="productEditBtn[]">
                                <i ></i>
                              </button>
                              <button type="button"  name="productDeleteBtn[]" data-bs-toggle="modal" data-bs-target="#deleteProductModal">
                                <i ></i>
                              </button>
                          </td>
                        </tr>
                        <?php
                        }
                        ?>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>

and this is how my jquery script look like:

<script type="text/javascript">
$("#dataTable tbody td .sizeEditBtn").hide();
$("#dataTable tbody .tableCell").focus(function() {
  var currentRow = $(this).closest("tr");
  var originalValue = currentRow.find(".cellData").html();
  localStorage.setItem('originalValue', originalValue);
  currentRow.find(".sizeEditBtn").show();
});
$("#dataTable tbody .tableCell").focusout(function() {
  var currentRow = $(this).closest("tr");
  currentRow.find(".sizeEditBtn").hide();
  var originalValue = localStorage.getItem('originalValue');
  $(this).html(originalValue);
  localStorage.clear();
});
</script>

any help will be appreciated thanks in advance.

CodePudding user response：

instead of this sentence

var originalValue = currentRow.find(".cellData").html();

use

var originalValue = $(this).html();