JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
<main>
  <div class="members">

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

JavaScript

let totalInheritors = [
  'Inheritor 1', 'Inheritor 2', 'Inheritor 3'
];

const generateDOM = function(e){

  const memEl = document.createElement('div');
  memEl.classList.add("member")
  const counter = document.createElement('input');
  const num = document.createElement('input');
  const mem = document.createElement('select');
  const removeButton = document.createElement('button');
  
  let memContainer = document.getElementsByClassName("members")[0];

  //  setup the drop-down members
  for (let i = 0; i < totalInheritors.length; i++) {
    let memOpt = document.createElement('option');
    memOpt.value = totalInheritors[i];
    memOpt.text = totalInheritors[i];
    memOpt.classList.add('member-name')
    mem.appendChild(memOpt);
  }
  memEl.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);
};