I have a table with a date column & action column. When I click on the row button, a text box is visible. On textbox change, I want to hide the text box & show the changed data <span class="actual-date-label"><?=$item['actual_date']?></span>

This is the code so far I have tried. But I am unable to hide textbox and show label on change event.

<tr data-id="<?=$item['product_id']?>">
    <td scope="col"><?=$item['planned_date']?></td>
    <td scope="col">
        <span class="actual-date-label"><?=$item['actual_date']?></span>
        <input
           type="text"
           size="8"
           class="form-control edit-datepicker"
           value="<?=$item['actual_date']?>"
           onchange="myFunction(this.value, <?=$item['p_id']?>)"
        >
    </td>
    <td scope="col" id="btn-edit"><input type="button" value="Edit"></td>
</tr>


    $(document).on('click', '#btn-edit', function(event) {
        event.preventDefault();
        $(this).closest("tr").find(".edit-datepicker").show();
        $(this).closest("tr").find(".actual-date-label").hide();
    })