How can I use “First Name” entered by user and use it as personalisation in a multi-step form questions?

This is a simple HTML structure of a multi-step form. I want to use the first name of user as personalisation in form section <p>.

For say if some one enter his name as “Jack” and then clicks on next button…. then in the next section the <p> will read as “Jack, What’s your age?” and then the final section’s <p> will be “Are you good Jack?”

<form action="">
            <div class="section1">
                <input type="text" placeholder="First Name">
                <button class="next-btn">Next</button>
            </div>
            <br>
            <div class="section2">
                <p>[First Name], What's your age?</p>
                <input type="number" class="age" placeholder="Your Age" >
                <button class="next-btn">Next</button>
            </div>
            <br>
            <div class="section3">
                <p>Are you doing good [First Name]?</p>
                <input type="text" class="good" placeholder="Yes or No ?" >
                <button class="submit">submit</button>
            </div>
        </form>

I am new to JS. So am not able to understand that how to do this. Looking forward to some assistance please.