Situation:
Passing an array of objects (days) into an EJS template and using a forEach loop to create cards, modal trigger buttons, and modals for each iteration.
The Issue:
While the cards and trigger modal buttons are generated correctly, the modal window only displays data from the first loop iteration (day[0]).
My Code:
Head Partial:
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="UTF-8" />
<title>Slope Notes</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384 H4X+4tKc7b8s4GoMrylmy2ssQYpDHoqzPa9aKXbDwPoPUA3Ra8PA5dGzijN+ePnH" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" href="/styles.css" />
<script src="https://kit.fontawesome.com/46ee1546cc.js" crossorigin="anonymous"></script><head>
<%- include('../partials/head'); %>
</head>
<body class="container">
<header><%- include('../partials/header'); %></header>
<% let formattedDate = ('0' + (days[0].date.getMonth()+1)).slice(-2) + '-' +
('0' + days[0].date.getDate()).slice(-2) + '-' + days[0].date.getFullYear() %>
<div class="list-group page-title-container list-group-item active">
<h2 class="page-title"><%= days[0].resortName %></h2>
<h2 class="page-title"><%= formattedDate %></h2>
<a class="btn-anchor btn-secondary" href="/date/new">
<i class="fa-solid fa-plus"></i>
Add Run
</a>
</div>
<div class="card-columns">
<% days.forEach((day, i) => { %>
<div class="card bg-secondary container">
<div class="row ard-header day-card-header-container">
<div class="col"><%= day.runName %></div>
<div class="col"><%= day.runDifficulty %></div>
<div class="col">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#runModal<%= i %>" data-whatever="<%= day.id%>">
View
</button>
<!-- Modal -->
<div class="modal fade" id="runModal<%= i %>" tabindex="-1" role="dialog" aria-labelledby="runModalLabel<%= i %>" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="runModalLabel<%= i %>"><%= day.runName %></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body container">
<div class="row">
<div class="col">Rating: <%= day.runDifficulty %></div>
<div class="col">Time (in min): <%= day.runTime %></div>
</div>
<div class="row">
<div class="col">Weather: <%= day.weatherConditions %></div>
<div class="col">Wind: <%= day.windConditions %></div>
</div>
<div class="row">
<div class="col">Snow: <%= day.snowConditions %></div>
</div>
<div class="row">
<div class="form-group">
<label for="runNotes" class="form-label mt-4">Extra Notes:</label>
<textarea class="form-control" id="runNotes" rows="5" cols="55"><%= day.runNotes %></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<% }) %>
</div>
<footer><%- include('../partials/footer'); %></footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>