My challenge is to dynamically add new entries with a fadeIn effect after submitting a form. Each entry is created using javascript template literals, containing divisions with unique classes and ids. Currently, all entries share the same ID for animation, which I am aware is not ideal and I'm attempting to resolve.
In my javascript code snippet:
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
...
}
const changeIds = () => {
...
}
I am unable to utilize any libraries or frameworks for this task. The issue arises when changing IDs in the function 'changeIds,' as only the first entry retains the new ID while subsequent entries remain unaffected.
What could be causing this problem?
For reference, here is a snippet of my HTML code:
<!doctype html>
...
<body>
...
<nav class="navbar text-center">
...
</nav>
<div class="container">
...
<form id="student-enrollment-form">
...
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
...
<script src="script_js.js"></script>
</body>
</html>
Additionally, here is the CSS code relating to animations:
#right-col-header{
text-align: center;
}
ul{
...
}
...
#student-id-image{
...
}
@keyframes fadeIn {
...
}
#student-id-details{
...
}
I would appreciate alternative solutions for implementing animations exclusively on new entries.