Change div within the same html

I'm doing a page with forms, and maybe it's one of the easiest things but I can not find documentation to do it,

I explain, the page has a form on the left, and I want to get the form to fill in the form in a php document that I have inside another div on the left, I do not know if I am explaining myself well I am enclosing a fragment of code so you can see it visually:

<form name='datos_personales' id='datos_personales' method='POST' action="functions.php">
                                                        <input type="hidden" name="action" id="action" value='guardar_datos_personales' />
                                                        <div class="FormCreator-default js-form-container">
                                                            <div style="position: relative;">
                                                                <div class="form-input" style="font-size: 16px; line-height: 24px; width: 256px; height: 72px; display: inline-block; position: relative; background-color: transparent; font-family: Roboto, sans-serif; transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; cursor: auto;">
                                                                    <label for="firstName" style="position: absolute; line-height: 22px; top: 38px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; z-index: 1; transform: scale(1) translate(0px, 0px); transform-origin: left top 0px; pointer-events: none; color: rgb(86, 93, 97);">Nombre</label>
                                                                    <div style="position: absolute; opacity: 0; color: rgba(0, 0, 0, 0.3); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; bottom: 12px;">José</div>
                                                                    <input type="text" name="firstName" id="firstName" style="padding: 0px; position: relative; width: 100%; border: medium none; outline: currentcolor none medium; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.87); cursor: inherit; font: inherit; height: 100%; box-sizing: border-box; margin-top: 14px;">
                                                                    <div>
                                                                        <hr style="border-color: rgb(224, 224, 224); border-style: none none solid; border-width: medium medium 1px; bottom: 8px; box-sizing: content-box; margin: 0px; position: absolute; width: 100%;">
                                                                        <hr style="border-color: rgb(21, 148, 246); border-style: none none solid; border-width: medium medium 2px; bottom: 8px; box-sizing: content-box; margin: 0px; position: absolute; width: 100%; transform: scaleX(0); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;">
                                                                    </div>
                                                                </div>

and I want it to "play" here:

    <div class="m-layout-info-group ">

                                                                        <div style="display:block;" class="">

                                                                            <h1>
                                                                             <?=$name;?>&nbsp;<?=$surname;?>
                                                                            </h1>
                                                                        </div>
                                                                            <div class="m-content-split">

                                                                                <span class="m-content-split-left"><b> Email </b></span>
                                                                                <span class="m-content-split-right m-content-mail"> <?=$email;?></span>

                                                                            </div>
                                                                            <div class="m-content-split">

                                                                                    <span class="m-content-split-left"><b> Dirección </b></span>
                                                                                    <span class="m-content-split-right"> <?=$address;?> </span>

                                                                            </div>
                                                                            <div class="m-content-split">

                                                                                <span class="m-content-split-left"><b> Teléfono </b></span>
                                                                                <span class="m-content-split-right"> <?=$phone;?></span>

                                                                            </div>

to the point that the code is not complete as you can see is a simple example, but I have explained myself well, tell me,

thanks in advance.