JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<section id="active-projects">
  <header>
    <h2>Active Projects</h2>
  </header>
  <button id="createNewButton">create new</button>
  <ul id='active'>
    <li id="p1" data-extra-info="Got lifetime access, but would be nice to finish it soon!" class="card">
      <h2>Finish the Course</h2>
      <p>Finish the course within the next two weeks.</p>
      <button class="alt">More Info</button>
      <button>Finish</button>
    </li>
  </ul>
</section>

CSS

h2 {
  margin: 0;
}

ul {
  padding: 0;
}

li {
  background: antiquewhite;
  list-style: none;
  padding: 10px;
}

JavaScript

function createNew() {
	//  get first li from DOM
  const newItem = document.getElementById('active').querySelector('li');
  
  //  deep clone this element
  const cln = newItem.cloneNode(true);
  
  //  give clone a new id
  cln.id = "p" + (document.querySelectorAll("#active > li").length + 1);
  
  // append clone to end of list
  document.getElementById('active').appendChild(cln);


  //Selects the Finish Button in the New Cloned Element and adds eventlistener to move it to the finished projects column when clicked.

  const clnButton = cln.querySelector('button:last-of-type');
  
  clnButton.addEventListener("click", function() {
      //DOMHelper.moveElement(cln.id, "#finished-projects ul");
   	console.log('finish button', cln.id);
  });
}


createNewButton.onclick = createNew;