I’m trying to implement a dynamic subtask feature similar to what I’ve attached in the images below. Here’s what I’m aiming for:
The input field has a + icon by default.
When the user starts typing in the input field, the + icon should change to X (cancel) and ✓ (confirm) buttons.
When the user confirms (✓), the entered text should be added as a subtask below the input field.
There should be options to edit and delete each added subtask.
I’ve attached screenshots for reference:
The initial state has a + icon next to the input field.
After typing, the input should change to show an X and ✓ to either confirm or cancel the action.
Added subtasks appear below, with each one having a pencil (edit) and trash can (delete) icon.
[enter image description here](https://i.sstatic.net/pkYpJUfg.png)
