How to show 1 form at a time on a page using JavaScript

Question

I'm creating lists which contain cards that are created by the user via forms.

The issue that I'm having here is that I want to show only 1 add-item-form form * on the page at a time (Not 1 form in each list but 1 form on the page overall). So, If a user creates multiple lists, then opens a form by clicking on the Add a card button, and then goes and click on another Add a card button from another list on the page, the first form should disappear, and a new form should appear in the list that it was clicked. Right now, multiple forms are being shown in different lists when I click the Add a card button, especially whenever I create multiple lists.

So basically, whenever Add a card is clicked, if a form is already open somewhere else, it will be closed and a new form will be opened within the list that I clicked the Add a card button.

I hope my explanation is useful. A sample of the code is shown below.

Here's a link to the code on [Codepen][ https://codepen.io/Joanc/pen/MZjJvy] 1 .
Your help will be appreciated.

ATTENTION : I only want to change the cards form with class add-item-form not the list form with id add-list-form . The (grey) lists are fine, my only issue is with the cards.

 // *************** ADD LISTS *************** // add new list submit eventlistener document.getElementById("add-list-form").addEventListener("submit", addList); function addList(e) { e.preventDefault(); const input = document.getElementById("list-name"); const name = input.value; input.value = ''; if ('' == name) { return; } const list = document.createElement('div'); list.setAttribute('class', 'list'); list.innerHTML = `<div class="list-container"> <div class="list-heading" > <h3 contenteditable="true">` + name + `</h3> <div class= "ellipsis"><a href="#">&#8230;</a></div> </div> <div> <div class="link-wrapper"> <a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a card</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another card</span> </a> </div> <form class="add-item-form"> <textarea placeholder="Enter a title for this card..."></textarea> <div> <input type="submit" value="Add Card"> <input type="button" value="&#88;" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <div class= "ellipsis"><a href="#">&#8230;</a></div> </div> </form> </div> </div>`; document.getElementById("list-wrapper").appendChild(list); } // add new item submit eventlistener document.addEventListener('submit', function(e) { if (e.target.matches('.add-item-form')) { e.preventDefault(); const textarea = e.target.getElementsByTagName('textarea')[0]; const text = textarea.value; textarea.value = ''; if ('' == text) { return; } //create card const cardItem = document.createElement('p'); const card = document.createElement('div'); card.setAttribute('class', 'card'); //create pen icon const pen = document.createElement('a'); pen.innerHTML = '<i class="fas fa-pen"></i>'; cardItem.innerHTML = text; card.appendChild(cardItem) card.appendChild(pen); e.target.parentElement.prepend(card); } }); let spans = document.getElementsByClassName("placeholder"); //toggle between 'add a list' and 'add another list' links window.onload = function(){ spans[1].style.display='none'; document.forms[0].style.display='none'; }; let clicked = 0; //toggle between links and 'add-list-form' function toggleDiv(formId, linkId){ clicked++; if(document.getElementById( formId ).style.display == 'block'){ document.getElementById( formId ).style.display = 'none'; document.getElementById( linkId ).style.display = 'block'; }else{ document.getElementById( linkId ).style.display = 'none'; document.getElementById( formId ).style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } //toggle between links and 'add-list-form' function hideSHowForm(form, link){ // var getForm = document.getElementsByClassName("listContainer"); for (var i=0;i<document.getElementsByClassName(form).length;i++){ // getForm[i].style.display = 'block'; if(document.getElementsByClassName(form )[i].style.display == 'block'){ document.getElementsByClassName(form)[i].style.display = 'none'; document.getElementById(link).style.display = 'block'; }else{ document.getElementById(link).style.display = 'none'; document.getElementsByClassName(form)[i].style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } } // function showTitleAndCardSection(){ // var showCardSection = document.getElementsByClassName("listContainer"); // for (var i=0;i<showCardSection.length;i+=1){ // showCardSection [i].style.display = 'block'; // } //} 

 /*************** ADD LISTS ***************/ .work-board { background-color: transparent; border-radius: 5px; display: flex; flex-direction: row; } #list-wrapper { margin: 8px 5px 10px 0px; padding: 2px; border-radius: 4px; background: transparent; border: none; display: flex; flex-direction: row; } .list { background: transparent; } .list-container { padding: 4px 8px; border-radius: 4px; width: 256px; background-color: rgb(226,228,230); border: none; margin: 2px 5px; } .list-heading { display: flex; flex-direction: row; padding-bottom: 3px; margin-bottom: 5px; } .list .list-heading h3 { margin: 2px 3px 0px 0px; width: 82%; border-radius: 4px; outline:none; font-size: 14px; font-weight: 600; padding: 5px; } .list .list-heading h3:focus{ border: solid 2px rgb(91,164,207); background-color: rgb(255, 255, 255); } .ellipsis { /* display: inline-block; */ width: 30px; text-align: center; border-radius: 4px; margin: 0px 1px 0px 0px; padding: 0px; float: right; } .ellipsis:hover { background-color: rgba(131, 140, 145, 0.2) } form.add-item-form .ellipsis{ margin-top: 5px; padding-bottom: 5px; } a { text-decoration: none; color: rgb(131, 140, 145); font-size: 19px; vertical-align:middle; /* line-height:3px; */ text-align:center; } form#add-list-form { margin-top: 12px; width: 270px; } .form-inner-container { background-color: rgb(226,228,230); padding: 5px 5px 0px 5px; border-radius: 4px; } input[type=text] { height: 32px; display: block; border-radius: 4px; border: solid 1px rgb(91,164,207); width: 247px; font-size: 14px; outline: none; box-shadow: 0 0 0 1px rgb(91,164,207); word-wrap: break-word; overflow: hidden; color: rgb(131, 140, 145); padding-left: 10px; } input[type=submit] { outline: none; font-size: 14px; font-weight: 700; color: rgb(255, 255, 255); padding: 8px 13px; background-color: rgb(90, 172, 68); box-shadow: 0 1px 0 0 rgb(63, 111, 33); border: none; border-radius: 4px; margin: 10px 0; } input[type=submit]:hover { background-color: rgb(71, 138, 53); } input[type=button]{ margin-right: -5px; border: none; background-color: transparent; font-size: 18px; font-weight: 500; color: rgb(131, 140, 145); } input[type=button]:hover{ color: rgb(103,109,112); } form.add-item-form { margin-top: 20px; } form.add-item-form textarea { outline: none; width: 92%; height: 50px; max-height: 120px; padding: 10px; font-size: 14px; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; display: block; word-wrap: break-word; resize: none; margin-top: -5px; } .card { width: 92%; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; background-color: rgb(255, 255, 255); min-height: 18px; word-wrap: break-word; padding: 0px 10px; margin-top: 9px; display: flex; flex-direction: row; position: relative; } .card:hover { background-color: rgba(248,249,249,0.7); } .card p{ position: relative; padding: 0px; margin: 6px 0; font-size: 14px; z-index: 1; } .card a{ position: absolute; margin-left: 220px; z-index: 2; } .fa-pen { font-size: 10px; margin: 0; padding: 7px; border-radius: 4px; } .fa-pen:hover { background-color: rgb(226,228,230); } #add-list-form, .add-item-form { display: none; } .link-wrapper { display: inline-block; margin-top: 20px; } a#show-list-form { text-decoration: none; color: rgb(255, 255, 255); background-color: rgba(1, 1, 1, 0.3); padding: 10px 15px 10px 20px; width: 242px; text-align: left; border-radius: 4px; font-size: 14px; height: 17px; } a#show-list-form:hover { background-color: rgba(1, 1, 1, 0.4); } a#show-list-form span:first-child { padding-right: 172px; } a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){ display: none; /* hides the 'Add another link' when window loads */ } 

 <div class="board-wrapper"> <div id="workBoard" class="work-board"> <div id="list-wrapper"></div> <div class="link-wrapper"> <a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a list</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another list</span> </a> </div> <form id="add-list-form"> <div class="form-inner-container"> <input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off"> <input type="submit" value="Add List"> <!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> --> <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="&#88;"> </div> </form> </div> </div><!-- end of board-wrapper --> 

Answer 1

It happens because you iterate with for loop over all add-item-form elements and add those styles. You add inline events listeners in addList() and you are not able to specify which of those elements were actually clicked, since you can't catch an event. I know how frustrating it may sound to you but I would recommend trying to write it all over again but keeping good practices. I advise you to use innerHTML as little you can, don't add inline styles to HTML in JS. Rather create classes that match your expectations like shown , hidden , style them and add them to events. Also use addEventListener instead of adding onclick() in HTML. You are really close to getting what you want, but its pretty messed up in this form.

Edit: The simplest workaround I can give you is this, but there is still much work to be done there:

 // *************** ADD LISTS *************** // add new list submit eventlistener document.getElementById("add-list-form").addEventListener("submit", addList); //Declaring index var listIndex = 0 function addList(e) { e.preventDefault(); const input = document.getElementById("list-name"); const name = input.value; input.value = ''; if ('' == name) { return; } const list = document.createElement('div'); list.setAttribute('class', 'list'); list.innerHTML = `<div class="list-container"> <div class="list-heading" > <h3 contenteditable="true">` + name + `</h3> <div class= "ellipsis"><a href="#">&#8230;</a></div> </div> <div> <div class="link-wrapper"> <a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form', ` + listIndex + `);"> <span class="placeholder"><i class="fas fa-plus"></i> Add a card</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another card</span> </a> </div> <form class="add-item-form"> <textarea placeholder="Enter a title for this card..."></textarea> <div> <input type="submit" value="Add Card"> <input type="button" value="&#88;" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <div class= "ellipsis"><a href="#">&#8230;</a></div> </div> </form> </div> </div>`; //Increasing index listIndex++ document.getElementById("list-wrapper").appendChild(list); } // add new item submit eventlistener document.addEventListener('submit', function(e) { if (e.target.matches('.add-item-form')) { e.preventDefault(); const textarea = e.target.getElementsByTagName('textarea')[0]; const text = textarea.value; textarea.value = ''; if ('' == text) { return; } //create card const cardItem = document.createElement('p'); const card = document.createElement('div'); card.setAttribute('class', 'card'); //create pen icon const pen = document.createElement('a'); pen.innerHTML = '<i class="fas fa-pen"></i>'; cardItem.innerHTML = text; card.appendChild(cardItem) card.appendChild(pen); e.target.parentElement.prepend(card); } }); let spans = document.getElementsByClassName("placeholder"); //toggle between 'add a list' and 'add another list' links window.onload = function(){ spans[1].style.display='none'; document.forms[0].style.display='none'; }; let clicked = 0; //toggle between links and 'add-list-form' function toggleDiv(formId, linkId){ clicked++; if(document.getElementById( formId ).style.display == 'block'){ document.getElementById( formId ).style.display = 'none'; document.getElementById( linkId ).style.display = 'block'; }else{ document.getElementById( linkId ).style.display = 'none'; document.getElementById( formId ).style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } document.getElementsByClassName('') //toggle between links and 'add-list-form' function hideSHowForm(form, link, id){ // var getForm = document.getElementsByClassName("listContainer"); // getForm[i].style.display = 'block'; if(document.getElementsByClassName(form)[id].style.display == 'block'){ document.getElementsByClassName(form)[id].style.display = 'none'; document.getElementById(link).style.display = 'block'; }else{ document.getElementById(link).style.display = 'none'; document.getElementsByClassName(form)[id].style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } // function showTitleAndCardSection(){ // var showCardSection = document.getElementsByClassName("listContainer"); // for (var i=0;i<showCardSection.length;i+=1){ // showCardSection [i].style.display = 'block'; // } 

 /*************** ADD LISTS ***************/ .work-board { background-color: transparent; border-radius: 5px; display: flex; flex-direction: row; } #list-wrapper { margin: 8px 5px 10px 0px; padding: 2px; border-radius: 4px; background: transparent; border: none; display: flex; flex-direction: row; } .list { background: transparent; } .list-container { padding: 4px 8px; border-radius: 4px; width: 256px; background-color: rgb(226,228,230); border: none; margin: 2px 5px; } .list-heading { display: flex; flex-direction: row; padding-bottom: 3px; margin-bottom: 5px; } .list .list-heading h3 { margin: 2px 3px 0px 0px; width: 82%; border-radius: 4px; outline:none; font-size: 14px; font-weight: 600; padding: 5px; } .list .list-heading h3:focus{ border: solid 2px rgb(91,164,207); background-color: rgb(255, 255, 255); } .ellipsis { /* display: inline-block; */ width: 30px; text-align: center; border-radius: 4px; margin: 0px 1px 0px 0px; padding: 0px; float: right; } .ellipsis:hover { background-color: rgba(131, 140, 145, 0.2) } form.add-item-form .ellipsis{ margin-top: 5px; padding-bottom: 5px; } a { text-decoration: none; color: rgb(131, 140, 145); font-size: 19px; vertical-align:middle; /* line-height:3px; */ text-align:center; } form#add-list-form { margin-top: 12px; width: 270px; } .form-inner-container { background-color: rgb(226,228,230); padding: 5px 5px 0px 5px; border-radius: 4px; } input[type=text] { height: 32px; display: block; border-radius: 4px; border: solid 1px rgb(91,164,207); width: 247px; font-size: 14px; outline: none; box-shadow: 0 0 0 1px rgb(91,164,207); word-wrap: break-word; overflow: hidden; color: rgb(131, 140, 145); padding-left: 10px; } input[type=submit] { outline: none; font-size: 14px; font-weight: 700; color: rgb(255, 255, 255); padding: 8px 13px; background-color: rgb(90, 172, 68); box-shadow: 0 1px 0 0 rgb(63, 111, 33); border: none; border-radius: 4px; margin: 10px 0; } input[type=submit]:hover { background-color: rgb(71, 138, 53); } input[type=button]{ margin-right: -5px; border: none; background-color: transparent; font-size: 18px; font-weight: 500; color: rgb(131, 140, 145); } input[type=button]:hover{ color: rgb(103,109,112); } form.add-item-form { margin-top: 20px; } form.add-item-form textarea { outline: none; width: 92%; height: 50px; max-height: 120px; padding: 10px; font-size: 14px; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; display: block; word-wrap: break-word; resize: none; margin-top: -5px; } .card { width: 92%; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; background-color: rgb(255, 255, 255); min-height: 18px; word-wrap: break-word; padding: 0px 10px; margin-top: 9px; display: flex; flex-direction: row; position: relative; } .card:hover { background-color: rgba(248,249,249,0.7); } .card p{ position: relative; padding: 0px; margin: 6px 0; font-size: 14px; z-index: 1; } .card a{ position: absolute; margin-left: 220px; z-index: 2; } .fa-pen { font-size: 10px; margin: 0; padding: 7px; border-radius: 4px; } .fa-pen:hover { background-color: rgb(226,228,230); } #add-list-form, .add-item-form { display: none; } .link-wrapper { display: inline-block; margin-top: 20px; } a#show-list-form { text-decoration: none; color: rgb(255, 255, 255); background-color: rgba(1, 1, 1, 0.3); padding: 10px 15px 10px 20px; width: 242px; text-align: left; border-radius: 4px; font-size: 14px; height: 17px; } a#show-list-form:hover { background-color: rgba(1, 1, 1, 0.4); } a#show-list-form span:first-child { padding-right: 172px; } a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){ display: none; /* hides the 'Add another link' when window loads */ } 

 <div class="board-wrapper"> <div id="workBoard" class="work-board"> <div id="list-wrapper"></div> <div class="link-wrapper"> <a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a list</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another list</span> </a> </div> <form id="add-list-form"> <div class="form-inner-container"> <input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off"> <input type="submit" value="Add List"> <!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> --> <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="&#88;"> </div> </form> </div> </div><!-- end of board-wrapper --> 

Answer 2

Just add these two lines above your const list = document.createElement('div'); line inside your addList() function like this:

var listWrap = document.getElementById("list-wrapper");
listWrap.innerHTML = "";

What the above does is assign the list-wrapper div to a variable called listWrap and then reset the list-wrapper div to an empty div whenever someone tries to submit a new form. After emptying the list-wrapper div, the function then proceeds to add the new "add-item-form form" submitted to the empty list-wrapper div.

---

Run the Code Snippet below to see how the above two lines work:

 // *************** ADD LISTS *************** // add new list submit eventlistener document.getElementById("add-list-form").addEventListener("submit", addList); function addList(e) { e.preventDefault(); const input = document.getElementById("list-name"); const name = input.value; input.value = ''; if ('' == name) { return; } var listWrap = document.getElementById("list-wrapper"); listWrap.innerHTML = ""; const list = document.createElement('div'); list.setAttribute('class', 'list'); list.innerHTML = `<div class="list-container"> <div class="list-heading" > <h3 contenteditable="true">` + name + `</h3> <div class= "ellipsis"><a href="#">&#8230;</a></div> </div> <div> <div class="link-wrapper"> <a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a card</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another card</span> </a> </div> <form class="add-item-form"> <textarea placeholder="Enter a title for this card..."></textarea> <div> <input type="submit" value="Add Card"> <input type="button" value="&#88;" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <div class= "ellipsis"><a href="#">&#8230;</a></div> </div> </form> </div> </div>`; document.getElementById("list-wrapper").appendChild(list); } // add new item submit eventlistener document.addEventListener('submit', function(e) { if (e.target.matches('.add-item-form')) { e.preventDefault(); const textarea = e.target.getElementsByTagName('textarea')[0]; const text = textarea.value; textarea.value = ''; if ('' == text) { return; } //create card const cardItem = document.createElement('p'); const card = document.createElement('div'); card.setAttribute('class', 'card'); //create pen icon const pen = document.createElement('a'); pen.innerHTML = '<i class="fas fa-pen"></i>'; cardItem.innerHTML = text; card.appendChild(cardItem) card.appendChild(pen); e.target.parentElement.prepend(card); } }); let spans = document.getElementsByClassName("placeholder"); //toggle between 'add a list' and 'add another list' links window.onload = function(){ spans[1].style.display='none'; document.forms[0].style.display='none'; }; let clicked = 0; //toggle between links and 'add-list-form' function toggleDiv(formId, linkId){ clicked++; if(document.getElementById( formId ).style.display == 'block'){ document.getElementById( formId ).style.display = 'none'; document.getElementById( linkId ).style.display = 'block'; }else{ document.getElementById( linkId ).style.display = 'none'; document.getElementById( formId ).style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } //toggle between links and 'add-list-form' function hideSHowForm(form, link){ // var getForm = document.getElementsByClassName("listContainer"); for (var i=0;i<document.getElementsByClassName(form).length;i++){ // getForm[i].style.display = 'block'; if(document.getElementsByClassName(form )[i].style.display == 'block'){ document.getElementsByClassName(form)[i].style.display = 'none'; document.getElementById(link).style.display = 'block'; }else{ document.getElementById(link).style.display = 'none'; document.getElementsByClassName(form)[i].style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } } // function showTitleAndCardSection(){ // var showCardSection = document.getElementsByClassName("listContainer"); // for (var i=0;i<showCardSection.length;i+=1){ // showCardSection [i].style.display = 'block'; // } //} 

 /*************** ADD LISTS ***************/ .work-board { background-color: transparent; border-radius: 5px; display: flex; flex-direction: row; } #list-wrapper { margin: 8px 5px 10px 0px; padding: 2px; border-radius: 4px; background: transparent; border: none; display: flex; flex-direction: row; } .list { background: transparent; } .list-container { padding: 4px 8px; border-radius: 4px; width: 256px; background-color: rgb(226,228,230); border: none; margin: 2px 5px; } .list-heading { display: flex; flex-direction: row; padding-bottom: 3px; margin-bottom: 5px; } .list .list-heading h3 { margin: 2px 3px 0px 0px; width: 82%; border-radius: 4px; outline:none; font-size: 14px; font-weight: 600; padding: 5px; } .list .list-heading h3:focus{ border: solid 2px rgb(91,164,207); background-color: rgb(255, 255, 255); } .ellipsis { /* display: inline-block; */ width: 30px; text-align: center; border-radius: 4px; margin: 0px 1px 0px 0px; padding: 0px; float: right; } .ellipsis:hover { background-color: rgba(131, 140, 145, 0.2) } form.add-item-form .ellipsis{ margin-top: 5px; padding-bottom: 5px; } a { text-decoration: none; color: rgb(131, 140, 145); font-size: 19px; vertical-align:middle; /* line-height:3px; */ text-align:center; } form#add-list-form { margin-top: 12px; width: 270px; } .form-inner-container { background-color: rgb(226,228,230); padding: 5px 5px 0px 5px; border-radius: 4px; } input[type=text] { height: 32px; display: block; border-radius: 4px; border: solid 1px rgb(91,164,207); width: 247px; font-size: 14px; outline: none; box-shadow: 0 0 0 1px rgb(91,164,207); word-wrap: break-word; overflow: hidden; color: rgb(131, 140, 145); padding-left: 10px; } input[type=submit] { outline: none; font-size: 14px; font-weight: 700; color: rgb(255, 255, 255); padding: 8px 13px; background-color: rgb(90, 172, 68); box-shadow: 0 1px 0 0 rgb(63, 111, 33); border: none; border-radius: 4px; margin: 10px 0; } input[type=submit]:hover { background-color: rgb(71, 138, 53); } input[type=button]{ margin-right: -5px; border: none; background-color: transparent; font-size: 18px; font-weight: 500; color: rgb(131, 140, 145); } input[type=button]:hover{ color: rgb(103,109,112); } form.add-item-form { margin-top: 20px; } form.add-item-form textarea { outline: none; width: 92%; height: 50px; max-height: 120px; padding: 10px; font-size: 14px; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; display: block; word-wrap: break-word; resize: none; margin-top: -5px; } .card { width: 92%; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; background-color: rgb(255, 255, 255); min-height: 18px; word-wrap: break-word; padding: 0px 10px; margin-top: 9px; display: flex; flex-direction: row; position: relative; } .card:hover { background-color: rgba(248,249,249,0.7); } .card p{ position: relative; padding: 0px; margin: 6px 0; font-size: 14px; z-index: 1; } .card a{ position: absolute; margin-left: 220px; z-index: 2; } .fa-pen { font-size: 10px; margin: 0; padding: 7px; border-radius: 4px; } .fa-pen:hover { background-color: rgb(226,228,230); } #add-list-form, .add-item-form { display: none; } .link-wrapper { display: inline-block; margin-top: 20px; } a#show-list-form { text-decoration: none; color: rgb(255, 255, 255); background-color: rgba(1, 1, 1, 0.3); padding: 10px 15px 10px 20px; width: 242px; text-align: left; border-radius: 4px; font-size: 14px; height: 17px; } a#show-list-form:hover { background-color: rgba(1, 1, 1, 0.4); } a#show-list-form span:first-child { padding-right: 172px; } a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){ display: none; /* hides the 'Add another link' when window loads */ } 

 <div class="board-wrapper"> <div id="workBoard" class="work-board"> <div id="list-wrapper"></div> <div class="link-wrapper"> <a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a list</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another list</span> </a> </div> <form id="add-list-form"> <div class="form-inner-container"> <input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off"> <input type="submit" value="Add List"> <!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> --> <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="&#88;"> </div> </form> </div> </div><!-- end of board-wrapper -->