Tengo una tabla con una columna de fecha y una columna de acción. Cuando hago clic en el botón de la fila, aparece un cuadro de texto. En el cambio del cuadro de texto, quiero ocultar el cuadro de texto y mostrar los datos modificados <span class="actual-date-label"><?=$item['actual_date']?></span>

Este es el código que hasta ahora he probado. Pero no puedo ocultar el cuadro de texto y mostrar la etiqueta en el evento de cambio.

 <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(); })