Add Data

<div class="DyFx FxJyCtCr FxAnIsCr Pg20 BrRs10 MnTpBm20 CrBdWe91">
    <div class="FxGw1"> <h1>Add Data</h1>  </div>
    <div>

        <div class="FmSh VwOyMeTb">
            <input type="checkbox" class="FmSh-checkbox PlFmTeIt" id="Fm">
            <label class="FmSh-label" for="Fm">
                <span class="FmSh-inner"></span>
                <span class="FmSh-switch"></span>
            </label>
        </div>

        <input type="checkbox" class="Pg10 DyNe " name="FormToggle" />

    </div>
    <div class="VwOyDp"><button class="Bn">List</button></div>
</div>

<div class="PlFmWh Gp5 Pg20 BrRs10 MnTpBm20 CrBdWe91">

    <div class="FxWhFl35 PlFmCt1">
        <div class="Wh100p BrTp3 Br1  CrBrTe CrBdWe90 Pg14 BrRs20">
            <form class="DyFx FxDnCn Gp10">

            <div class="TxBxCnAeCr">
                <input type="text" class="TxBxCnAe" placeholder=" " required>
                <label class="TxBxCnAeLl">Email</label>
            </div>


            <div class="TxBxCnAeCr">
                <input type="text" class="TxBxCnAe" placeholder=" " required>
                <label class="TxBxCnAeLl">Name</label>
            </div>

            <div class="TxBxCnAeCr">
                <input type="text" class="TxBxCnAe" placeholder="" required>
                <label class="TxBxCnAeLl">Age</label>
            </div>

            <div class="DyFx Wh100p Gp5">
                <div> 
                    <button class='Bn CrBdTt Br2 CrBrRd CrRd30Lt'>Back</button>
                </div>
                <div class="FxGw1 DyFx FxJyCtFxEd">
                    <button class='Bn CrBdTt Br2 CrBrTe CrTe30Lt'>Next</button>
                </div>
            </div>

        </form>
        </div>
    </div>

    <div class="FxWhFl65 PlFmCt2">

        <div class="Wh100p BrTp3 Br1  CrBrTe CrBdWe90  Pg20 BrRs20">
            <table class="Wh100p BrCeCe FtSe10 Sl:FtSe16">
                <tr class="CrBdTe70Lt">
                    <th class="Br1 CrBrGy Pg5 TtAnLt">Company</th>
                    <th class="Br1 CrBrGy Pg5 TtAnLt">Contact</th>
                    <th class="Br1 CrBrGy Pg5 TtAnLt">Country</th>
                </tr>
                <tr>
                    <td class="Br1 CrBrGy Pg5">Alfreds Futterkiste</td>
                    <td class="Br1 CrBrGy Pg5">Maria Anders</td>
                    <td class="Br1 CrBrGy Pg5">Germany</td>
                </tr>
                <tr>
                    <td class="Br1 CrBrGy Pg5">Centro comercial Moctezuma</td>
                    <td class="Br1 CrBrGy Pg5">Francisco Chang</td>
                    <td class="Br1 CrBrGy Pg5">Mexico</td>
                </tr>
            </table>
        </div>
    </div>

</div>


function initAppData(){

    let PlFmTeIt = document.getElementsByClassName("PlFmTeIt")[0];
    let PlFmWh = document.getElementsByClassName("PlFmWh")[0];

    PlFmTeIt.addEventListener('click', function () {

        if (this.checked) {
            document.getElementsByClassName('PlFmCt1')[0].style.maxWidth = "0";
            document.getElementsByClassName('PlFmCt1')[0].style.width = "0";

            document.getElementsByClassName('PlFmCt2')[0].style.maxWidth = "100%";
            document.getElementsByClassName('PlFmCt2')[0].style.width = "100%";


        }
        if (!this.checked) {
            document.getElementsByClassName('PlFmCt1')[0].style.width = "100%";
            document.getElementsByClassName('PlFmCt1')[0].style.maxWidth = "100%";
            document.getElementsByClassName('PlFmCt2')[0].style.maxWidth = "0";
            document.getElementsByClassName('PlFmCt2')[0].style.width = "0";

        }

    });

}

document.addEventListener('DOMContentLoaded', function() {
    initAppData();
}, false);