How do I generate a div with select-option tags and some button on the click on a button?

So I have this code:
HTML
I want the generated div to be append to the div with class ‘members’
I also have two button: one to generate the div and the other to submit
My console shows me no error but the code won’t just work and it will freeze my browser
Any help??
This is my code

<main>
        <div class="members">

        </div>
        <form>
            <button class="addMember" type="button">Add Member <i class="fas fa-plus-square"></i> </button>
            <button type="submit" class="submit">Submit</button>
        </form>
    </main>

JS:

const generateDOM = function(e) {
    e.preventDefault();
    const memEl = document.createElement('div');
    memEl.classList.add("member")
    const counter = document.createElement('input');
    const num = document.createElement('input');
    const mem = document.createElement('select');
    let memOpt = document.createElement('option');
    const removeButton = document.createElement('button');

    //  setup the drop-down members
    for (let i = 0; i < totalInheritors.length;) {
        memOpt.value = totalInheritors[i];
        memOpt.text = totalInheritors[i];
        memOpt.classList.add('member-name')
        mem.appendChild(memOpt);
    }
    mem.classList.add('member-group')
    memEl.appendChild(mem);

    // setup the removeButton
    removeButton.innerHTML = '<i class="fas fa-trash"></i>';
    removeButton.classList.add("trash-btn");
    memEl.appendChild(removeButton);

    // setup counter attributes
    counter.setAttribute('type', 'range');
    counter.min = 1;
    counter.max = 10;
    counter.classList.add('mem-range')
    memEl.appendChild(counter);

    // setup counter attributes
    num.setAttribute('type', 'number');
    num.min = 1;
    num.max = 10;
    num.classList.add('mem-num')
    memEl.appendChild(num);

    // setting DOM elements
    memContainer.appendChild(memEl);
};

Note I wanna generate my options from an array of strings