I have a function that dynamically creates a table and adds a header and data rows. The table is adding an additional row that I do not want when I append buttons to the last data row. I think this is happening because the table header row element is closing after the data row elements are added? How can I have the header row close at the right place? Here is my code and an image of the console. Thanks.
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stocknetic</title>
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header id="header">
<div class="row">
<div class="col-full">
<div class="nav-container">
<h2 class="title"><a id="title-link-home" href="/">Stocknetic</a></h2>
<div class="nav-items-container hidden">
<ul class="nav-list-items">
<li class="nav-list-item"><a id="watchlists-link" href="#/watchlists">Watchlists</a></li>
<li class="nav-list-item"><a id="statistics-link" href="#/statistics">Statistics</a></li>
<li class="nav-list-item"><a id="news-link" href="#/news">News</a></li>
<li class="nav-list-item"><a id="profile-link" href="#/profile">Profile</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="page-wrap">
<div class="home-container view" data-view="home">
<div class="logo-container">
<div class="logo-text-container">
<h1 class="logo">Stocknetic</h1>
</div>
<div class="auth-buttons-container">
<button id="sign-in-button">Sign-In</button>
<button id="register-button">Register</button>
<button id="sign-out-button">Sign-Out</button>
</div>
</div>
</div>
<div class="sign-in-page hidden" data-view="sign-in"></div>
<div class="registration-page-container hidden" data-view="registration"></div>
<div class="watchlists-page-container hidden" data-view="watchlists"></div>
<div class="create-watchlists-page-container hidden" data-view="create-watchlists"></div>
<div class="search-stocks-page-container hidden" data-view="search-stocks"></div>
<div class="statistics-page-container hidden" data-view="statistics"></div>
</div>
<footer id="footer">
<div class="row" >
<div class="col-full">
<div class="footer-container">
<h2 class="title">Stocknetic</h2>
</div>
</div>
</div>
</footer>
<script type="module" src="js/index.js"></script>
<script type="module" src="js/data.js"></script>
</body>
</html>
async function renderWatchListsPage() {
var watchlistsContainer = document.createElement("div")
watchlistsContainer.className = "watchlists-container"
var watchlistsHeader = document.createElement("h2")
watchlistsHeader.textContent = "Watchlists"
var watchlistsTable = document.createElement("table")
watchlistsTable.setAttribute("id", "watchlistsTable")
var searchStocksPageButtonContainer = document.createElement("div")
searchStocksPageButtonContainer.className = "search-stocks-page-button-container"
var createWatchlistsButton = document.createElement("button")
createWatchlistsButton.setAttribute("id", "createWatchlistsButton")
var createWatchlistsFormLink = document.createElement("a")
createWatchlistsFormLink.setAttribute("id", "createWatchlistsFormLink")
createWatchlistsFormLink.setAttribute("href", "#/createWatchlists")
createWatchlistsFormLink.textContent = "Create a watchlist"
var searchStocksPageButton = document.createElement("button")
searchStocksPageButton.setAttribute("id", "searchStocksPageButton")
var searchStocksPageLink = document.createElement("a")
searchStocksPageLink.setAttribute("id", "searchStocksPageLink")
searchStocksPageLink.setAttribute("href", "#/searchStocks")
searchStocksPageLink.textContent = "Search for stocks"
createWatchlistsButton.appendChild(createWatchlistsFormLink)
searchStocksPageButton.appendChild(searchStocksPageLink)
searchStocksPageButtonContainer.appendChild(searchStocksPageButton)
searchStocksPageButtonContainer.appendChild(createWatchlistsButton)
var watchlists = await getWatchlists()
var watchlistsTableHeader = watchlistsTable.createTHead()
watchlistsTableHeader.setAttribute("id", "watchlistsTableHeader")
var watchlistsTableHeaderRow = watchlistsTableHeader.insertRow()
var watchlistsTableHeaderCellOne = watchlistsTableHeaderRow.insertCell()
watchlistsTableHeaderCellOne.className = "watchlistsTableHeaderRowData"
watchlistsTableHeaderCellOne.innerHTML = "Id."
var watchlistsTableHeaderCellTwo = watchlistsTableHeaderRow.insertCell()
watchlistsTableHeaderCellTwo.className = "watchlistsTableHeaderRowData"
watchlistsTableHeaderCellTwo.innerHTML = "Name"
var watchlistsTableHeaderCellThree = watchlistsTableHeaderRow.insertCell()
watchlistsTableHeaderCellThree.className = "watchlistsTableHeaderRowData"
watchlistsTableHeaderCellThree.innerHTML = "Description"
for (let i = 0; i < watchlists.length; i++) {
var watchlistsTableRow = watchlistsTable.insertRow()
watchlistsTableRow.className = "watchlistsTableRow"
var watchlistCellOne = watchlistsTableRow.insertCell()
watchlistCellOne.className = "watchlistsTableIdData"
watchlistCellOne.innerHTML = `${watchlists[i].id}`
var watchlistCellTwo = watchlistsTableRow.insertCell()
watchlistCellTwo.className = "watchlistsTableData"
watchlistCellTwo.innerHTML = `${watchlists[i].name}     `
var watchlistCellThree = watchlistsTableRow.insertCell()
watchlistCellThree.className = "watchlistsTableData"
watchlistCellThree.innerHTML = `${watchlists[i].description}     `
var viewWatchlistStocksButton = document.createElement("button")
viewWatchlistStocksButton.textContent = "Details"
var deleteWatchlistButton = document.createElement("button")
deleteWatchlistButton.textContent = "Remove"
watchlistsTableRow.appendChild(viewWatchlistStocksButton)
watchlistsTableRow.appendChild(deleteWatchlistButton)
}
watchlistsContainer.appendChild(watchlistsHeader)
watchlistsContainer.appendChild(watchlistsTable)
watchlistsViewEl.appendChild(watchlistsContainer)
watchlistsViewEl.appendChild(searchStocksPageButtonContainer)
}
