JSFiddle - React, Tailwind, and code Playground

HTML

<form action="javascript: console.log(categories);">
  <div class="wrapper">
  </div>
  <input type="submit" value="Submit" />
</form>

CSS

.level-1 {
  padding-left: 1em;
}

.level-2 {
  padding-left: 2em;
}

.level-3 {
  padding-left: 2em;
}

.level-4 {
  padding-left: 2em;
}

JavaScript

var categories = {
  name: "",
  subCategories: []
};

function getPlaceholderText(level) {
  "use strict";
  let i = 0
  let text = "My ";
  while (i < level) {
    text += "sub-"
    i++;
  }
  return text + "category text";
}

function getValueText(level) {
  "use strict";
  let i = 0
  let text = "Add ";
  while (i < level) {
    text += "sub-"
    i++;
  }

  return text + "category";
}

function appendInnerCategory(element, level, cat, parentCat) {
  "use strict";
  var myDiv = document.createElement("div");
  myDiv.className = "level-" + level
  var btn = document.createElement("input");
  btn.type = "button";
  btn.value = getValueText(level);
  btn.addEventListener("click", function(event) {
    var subCat = {
      name: "",
      subCategories: []
    }
    cat.subCategories.push(subCat);
    appendInnerCategory(event.target.parentNode, level + 1, subCat, cat);
  });
  var textBox = document.createElement("input");
  textBox.placeholder = getPlaceholderText(level);
  textBox.addEventListener("change", function(event) {
    cat.name = event.target.value;
  });
  textBox.type = "text";
  myDiv.appendChild(textBox);
  myDiv.appendChild(btn);
  if (level > 0) {
    var rmBtn = document.createElement("input");
    rmBtn.type = "button";
    rmBtn.value = "Remove category recursively";
    rmBtn.addEventListener("click", function(event) {
      event.target.parentNode.remove();
      var index = parentCat.subCategories.indexOf(cat);
      parentCat.subCategories.splice(index, 1);
    });
    myDiv.appendChild(rmBtn);
  }

  element.appendChild(myDiv);
}

appendInnerCategory(document.querySelector('.wrapper'), 0, categories);