Technical task continues!

I've been elbow deep in a recently assigned technical task and I may see the light in the end of the tunnel here! I reached out to a friend (Per, if you're reading this: ♡), and he was a really great teacher, guiding me how to achieve what I wanted without explicitly copy pasting me the solution.
Here's what we achieved by the end of the day.

See the Pen Tabulator project by Anzelika (@anzuj) on CodePen.

UPSIDE: All the dictionaries now dynamically load upon page load, fetching the data from a nested array of all dictionaries!

DOWNSIDE: Had to revamp the "add new pair" function I made for a single dictionary before, so that a form of 2 fields and a submit button would be generated for each and single dictionary within the loop. The above codepen solution works, but it is a bit lengthy, so I went back to the drawing board and tried out Tabulator's native "add row" method to reduce the amount of code. The results are pretty spectacular! Here is the amount of code dedicated for adding new entries to the dictionary:

//empty array to save input form indexes
let tableinput = []; 

//create a form for new entries for each dictionary
  let newPairContainer = document.createElement("div");
  newPairContainer.classList.add("manual");
  document.getElementById("dictionaries").appendChild(newPairContainer);


  let newpair = document.createElement("form");
  newpair.method = "get"
  newpair.action = "/no"
  newpair.classList.add("newpair");
  newpair.addEventListener("submit", function (e) {
    e.preventDefault();
    addPair(dictionary);
  })
  newPairContainer.appendChild(newpair);

  //create inputs
  let domainInput = document.createElement("INPUT");
  domainInput.setAttribute("type", "text");
  domainInput.setAttribute("placeholder", "domain");
  domainInput.setAttribute("name", "domain");
  newpair.appendChild(domainInput);

  let rangeInput = document.createElement("INPUT");
  rangeInput.setAttribute("type", "text");
  rangeInput.setAttribute("placeholder", "range");
  rangeInput.setAttribute("name", "range");
  newpair.appendChild(rangeInput);

  let submitInput = document.createElement("INPUT");
  submitInput.setAttribute("type", "submit");
  submitInput.setAttribute("value", "Add new entry");
  newpair.appendChild(submitInput);

  tableinput.push({
    domain: domainInput,
    range: rangeInput
  });


const addPair = (x) => {
  let domainResult = tableinput[x].domain.value;
  let rangeResult = tableinput[x].range.value;

  tabledata[x].push({
    domain: domainResult,
    range: rangeResult
  });

  // //reset form fields
  tableinput[x].domain.value = "";
  tableinput[x].range.value= "";
}

And here is the refactored solution using Tabulator's inbuilt method.  There is even no need to keep a separate array just for the sake of keeping track of user input field indexes (so that they'd match up with the dictionary and values would get pushed into the right dictionary array)

  //create a tableContainer div
  let tableContainer = document.createElement("div");
  tableContainer.classList.add("tableContainer");
  document.getElementById("dictionaries").appendChild(tableContainer);

  //create table-control div
  let tableControlContainer = document.createElement("div");
  tableControlContainer.classList.add("tableControlContainer");
  tableContainer.appendChild(tableControlContainer);

  //create a "Add new row" button
  let addBtn = document.createElement("button");
  addBtn.classList.add("addBtn");
  addBtn.innerHTML ="Add new entry"
  addBtn.addEventListener("click", function(){
  tabledata[dictionary].push({domain:"", range:"",});
});
  tableControlContainer.appendChild(addBtn);

While making the "from scratch" solution was a great learning opportunity, I'll keep the second option ;)

Next challenge: Delete dictionary + database array
It took a bit tinkering to get the event listener to work as intended. At first, it only deleted the array, but the table content remained. Then, the array and table content was removed, yet empty column framework still remained. Then, it deleted the table and array, but buttons remained! Finally I got it to work with a two step process of removing the array via splice and then visually removing the whole table container from DOM:

  deleteBtn.addEventListener("click", function () {
    tabledata.splice([dictionary],1)
    tableContainer.remove();
  });

Was really satisfying to see the whole shebang disappear!

Next challenge: Create new dictionary + update database & DOM
Brainwrecker of the day!
There are 2 options to go about this.

1. Tabulator allows uploading JSON files to generate a table. Trick here is to pull the table data and push it into the overall dictionaries array with the right key values format
2. Manual form, collecting entries via JS and pushing them in the dictionaries array

I implemented the JSON table load, but not sure how to pull the data from it yet. It really comes down to the Tabulator internal methods, so I gotta review its documentation on that.

Meanwhile I started tinkering on the form, and how to collect information from there, since that process is a bit more familiar.