How can I make this form dynamically with ES6 by extending a base class form?

Question

I would like to make forms in JS that act like they're inheriting...For example, I can easily append form elements all day long using a for loop, but I'd rather leave myself the freedom to insert a different element in the middle. In other words, I want this to be 'modular', and have a base class that can generate something simple like a login screen, but then extend it to include dropdowns in between text fields. Any ideas as to how to make this happen? Preferably with ES6 classes and import/export and without the webpack nonsense. Ideally i'd have a class called BasicForm and have RegistrationForm extends BasicForm. This way, I could simply store field names in an array and change that file once if i needed to make changes as opposed to changing everything. Here's the existing code....Note that "invoices" is only shown if the user role option selected is "admin"....which makes the idea of trying to make this all very difficult for me to comprehend. Is there any way to procedurally generate, with bootstrap and custom classes, this from Javascript using ES6 classes, such that the module may be reused to create forms either with or without dropdowns?

HTML:

<div class= "row">  <!--Inherits background from .body-->
    <div class="col-hidden col-sm col-md col-lg col-xl">     <!--spacing divs inherit background from .body-->
        &nbsp;
    </div>
    <div class="form-box rounded col-12 col-xs col-sm-7 col-md-6 col-lg-4 col-xl-3">  <!--Actual box containing fields and prompts and buttons changes to new background-->
        <h2 class="portal-heading">Registration</h2>
        <form name="new_user_form">
            Email Address<input type="text" class="form-control register-field highlight-hover" name="email" value="" placeholder="Email Address"><br>
            Re-Enter Email Address<input type="text" class="form-control register-field highlight-hover" autocomplete="off" name="email" value="" placeholder="Re-enter Email Address"><br>
            First Name<input type="text" class="form-control register-field highlight-hover" autocomplete="given-name" name="firstname" value="" placeholder="First Name"><br>
            Last Name<input type="text" class="form-control register-field highlight-hover" autocomplete="family-name" name="lastname" value="" placeholder="Last Name"><br>
            Company Name<a href="#" class="help-icon" data-toggle="tooltip" title="Choose your company name.  If you do not see it here, please contact ACSI to become an official distributor."><img src="images/help-icon.png"></a>
            <select class="form-control register-field highlight-hover" name="company">
                <option value="noSelect">Select</option>
                <option value="company2">Company 2</option>
            </select>
            Mobile Phone <a href="#" class="help-icon" data-toggle="tooltip" title="This is used for password recovery only."><img src="images/help-icon.png"></a>
            <input type="text" class="form-control register-field highlight-hover" autocomplete="tel" name="mobile" value="" placeholder="0005559999"><br>
            Portal User Role <a href="#" class="help-icon" data-toggle="tooltip" title="Portal admins are the administrators for your company."><img src="images/help-icon.png"></a>
            <select class="form-control register-field highlight-hover" name="role" id="user-role">
                <option value="user">User</option>
                <option value="admin">Admin</option>
            </select>

            <div id="invoices">
                Enter two recent invoice totals in USD($)<br>
                Invoice 1<input type="text" class="form-control register-field highlight-hover" name="invoice1" value="" placeholder="0.00">
                Invoice 2<input type="text" class="form-control register-field highlight-hover" name="invoice2" value="" placeholder="0.00">
            </div> 
            <button class="btn btn-block highlight-hover" id="submit">Submit</button>
        </form>
    </div>
    <div class="col-hidden col-sm col-md col-lg col-xl">     <!--spacing divs-->
        &nbsp;
    </div>
</div>

Answer 1

I would suggest using Web Components. They're native, have support in Chrome with other browsers soon to come, and you can use a polyfill for other browsers. With below code:

class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();
    //put code here
  }
}

Insert code found at https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements after super() with your element functionality

Define a new element: `customElements.define('popup-info', PopUpInfo);

And then you can use it like this:

<popup-info img="img/alt.png" text="Your card validation code (CVC)
is an extra security feature — it is the last 3 or 4 numbers on the
back of your card.">

Example taken from link above, in Mozilla's Dev Site.