Adding new li to one of multiple ul using javascript

Question

I am trying to make a board with javascript.

While doing this, I have faced trouble with adding new li to ul .

There would be several ul and the user could add li in the ul he clicked 'add_card' button. I did try, but it is added only to the first ul .

Here is what I've tried.

HTML

<main>
<div id="myTitle" class="bigTitle">
  <input type="text" id="myInput" placeholder="TItle...">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>

<div id="myBoard">
  <div id="myUL-con">

    <h3 contenteditable="true">Things to do</h3>

    <span class="close close_list"></span>

    <ul id="myUL" runat="server">
      <li id="node" draggable="true" ondragstart="drag(event)">
        <h4 id="sm_title" contenteditable="true">Do the meditation</h4>
        <span contenteditable="true">- before going to sleep</span>
      </li>          
    </ul>

    <span id="add_card" onclick="addCard()" type="button"></span>

  </div>      
</div>

CSS

/* When clicked on, add a background color and strikeout text */
ul li.checked {
  background: rgba(106, 140, 168, 0.82);
  color: #f4f5f7;
  text-decoration: line-through
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border: solid #f4f5f7;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px
}

JavaScript

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item or card item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function () {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function (e) {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('checked');
  }
}, false);

// Create a new list item when clicking on the "Add" button
function newElement() {
  var card = document.createElement("div");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue),
    h3 = document.createElement("h3");
  card.appendChild(h3);
  h3.appendChild(t);



 if (inputValue === '') {
    alert("You must write something!");
  } else {
    //Create new LIST and its CARD as well
    var myBoard = document.getElementById("myBoard");
    var newUl = myBoard.appendChild(card);
    var myUl = document.createElement("ul");
    var list = document.createElement("li");
    var h4 = document.createElement("p");
    var span = document.createElement("span");
    var close = document.createElement("span");
    var add_card = document.createElement("span");

    newUl.setAttribute("id", "myUL-con");
    newUl.appendChild(myUl);    

    newUl.appendChild(close);
    myUl.appendChild(list);
    myUl.setAttribute("id", "myUL");

    close.className = "close";

    list.appendChild(h4);
    h4.setAttribute("id", "sm_title");
    h4.setAttribute("contenteditable", "true");
    h4.textContent = "Title..";

    list.appendChild(span);
    span.setAttribute("contenteditable", "true");
    span.textContent = "- Note here..";

    var myNodelist = document.getElementsByTagName("LI");
    var i;
    for (i = 0; i < myNodelist.length; i++) {
      var span = document.createElement("SPAN");
      var txt = document.createTextNode("\u00D7");
      span.className = "close";
      span.appendChild(txt);
      myNodelist[i].appendChild(span);
    }

newUl.appendChild(add_card);
add_card.setAttribute("id", "add_card");
add_card.setAttribute("onclick", "addCard()");

//Reset the input value
var resetButton = document.getElementById("myInput");
if(resetButton){
        resetButton.value= "";
    }

  }

  // Again, create a "x" button to delete
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  card.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function () {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }


}

// Creat new Card
function addCard() {
  var ul = document.getElementById("myUL");
  var li = document.createElement("li");
  var add = document.getElementsByClassName("add");

  ul.appendChild(li);
  li.setAttribute("id", "node");
  li.className = "add";

  for (i = 0; i < add.length; i++) {
    add[i].onclick = function () {
      var div = this.parentElement;
      div.appendChild(li);
      console.log(div);
    }
  }
}

Plus, kindly let me know where I should write the code in order to make all added li have all functions like the existed li as the functions which should be supposed to work don't work either.

Answer 1

The way your code behaves like that is bcos you append each new li element to 'myUL' which represent the first card.

What you should do is to give each new element a unique id.

The way I did it is when adding new element:

      let ulIdx = 1;
      ulIdx++;
      let myUL_id = "myUL"+ulIdx.toString();
      myUl.setAttribute("id", myUL_id);

newUl.appendChild(add_card);
add_card.id = "add_card"+ulIdx.toString();
add_card.innerText = "Add li element";
add_card.setAttribute("onclick", "addCard(this)");

Then in function addCard(el){}, include below lines;

  var add_LI_element = el.getAttribute("id");
  var elIndex = add_LI_element.charAt(add_LI_element.length -1);
  var ul = document.getElementById("myUL"+elIndex);

my working example stackblitz