create index function but it doesnt work

Co-authored-by: FL <lzzfnc@users.noreply.github.com>

contents.js

@@ -1,5 +1,6 @@
 const reference = document.getElementById("reference");
 const contributionsList = document.getElementById("contributions");
+const trackList = document.getElementById("trackList");
 
 const pagedjs = document.createElement("script");
 pagedjs.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
@@ -27,6 +28,7 @@ function fetchContents() {
 function populateContributions(contributions) {
 	contributions.forEach((contribution) => {
 		contributionsList.appendChild(createSection(contribution));
+		createIndexSection(contribution);
 	});
 }
 
@@ -53,6 +55,26 @@ function atlasLink() {
 	}
 }
 
+function createIndexSection(contribution) {
+	let table = document.createElement("table"); 
+	let title = document.createElement("h4");
+	title.innerHTML = contribution.title;
+	contribution.audio.forEach((track) => {
+		console.log(track);
+	// 	let row = document.createElement("tr");
+	// 	let col1 = document.createElement("td");
+	// 	let col2 = document.createElement("td");
+	// 	col1.setAttribute("class", "symbol");
+	// 	col2.setAttribute("class", "filename");
+	// 	col2.innerHTML = track;
+	// 	row.appendChild(col1);
+	// 	row.appendChild(col2);
+	// 	table.appendChild(row);
+	});
+	trackList.appendChild(title);
+	trackList.appendChild(table);
+}
+
 
 
 function printViewToggle() {

index.html

@@ -123,12 +123,13 @@
 						</g>
 					</g>
 				</svg>
-
+				<!-- structure placeholder -->
 				<div class="info">
 					<div class="title">Title</div>
 					<div class="filename">Filename.mp3</div>
 					<div class="position">04:35</div>
 				</div>
+				<!-- --------------------- -->
 			</div>
 			<div class="libretto" contenteditable="true">
 				<header class="cover">
@@ -155,8 +156,17 @@
 				</header>
 				<!-- <section class="vocabulary"></section> -->
 
-				<section class="index">
+				<section class="index" id="index">
 					<h2>Index</h2>
+					<div class="tracklist" id="trackList"></div>
+					<!-- table structure below -->
+					<!-- <table class="tracks" id="tracks-ref">
+						<caption class="title"></caption>
+						<tr class="track">
+							<td class="symbol"></td>
+							<td class="filename"></td>
+						</tr>
+					</table> -->
 				</section>
 				<div class="contributions" id="contributions"></div>
 

print.css

@@ -64,6 +64,11 @@
 
     .libretto {
         overflow-y: hidden;
+        overflow-x: hidden;
+    }
+
+    .libretto > *{
+        border-bottom: none;
     }
 
 
@@ -86,7 +91,7 @@
     .contribution li{
         column-span: none;
     }*/
-    
+
 
     .content p, .content h2 {
         margin: default;