JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
</div>

CSS

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

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

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

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

JavaScript

function getValueText(level) {

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

  return text + "category";
}

function appendInnerCategory(level, element) {
  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) {
    appendInnerCategory(level + 1, event.target.parentNode);
  });
  var textBox = document.createElement("input");
  textBox.type = "text";
  myDiv.appendChild(textBox);
  myDiv.appendChild(btn);
  element.appendChild(myDiv);
}

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