title: Function changing id only once. [Javascript]
body: <p>What I am trying to do: I am adding new entries whenever I submit a form and that entry should have an animation (fadeIn effect). I am adding new entries whenever I submit a form. Every entry is being added using javascript template literal in which I am adding using divisions with classes and ids. Every entry has an Id and when I use that ID to add animation, all entries get the animation as they have same ids (I know IDs should not be same that is why I am trying to change it).</p>
  <p>What I am trying to do: I am trying to change ID of previously added entry or div.
  Program is changing ID only once.</p>
  <p>My javascript code:</p>
  <pre><code>var enrolledStudents = [];
  
  let form = document.getElementById(&quot;student-enrollment-form&quot;);
  
  
  const getStudentDetails = (event) =&gt; {
      event.preventDefault();
  
      // This is the important part, test if form is valid
      if (form.checkValidity() === false){
          // This is the magic function that displays the validation errors to the user
          form.reportValidity();   
          return; 
      }
      var skillsList = [];
      var name = document.getElementById(&quot;name-input&quot;).value;
      var email = document.getElementById(&quot;email-input&quot;).value;
      var website = document.getElementById(&quot;website-input&quot;).value;
      var imgLink = document.getElementById(&quot;imglink-input&quot;).value;
      var gender = document.querySelector('input[name=&quot;genderRadio&quot;]:checked').value;
      var skills = document.querySelectorAll('input[type=&quot;checkbox&quot;]');
  
      skills.forEach(item =&gt; {
          if (item.checked){
              skillsList.push(item.value);
          }
      })
  
      var student = {
          'name': name,
          'email': email,
          'website': website,
          'imageLink' : imgLink,
          'gender': gender,
          'skills': skillsList,
      }
      enrolledStudents.push(student)
      console.log(enrolledStudents);
      
      const studentList = document.getElementById('student-list');
      studentList.innerHTML = `${
          enrolledStudents.map(student =&gt; {
              var passport = student.imgLink;
              return `
                  &lt;div class=&quot;row&quot; id=&quot;student-id-details&quot; style=&quot;border: 2px solid black;  border-top: none; height: 120px;&quot;&gt;
                      &lt;div class=&quot;col&quot; style=&quot;padding-top: 10px; padding-bottom: 5px; height: 100px;&quot;&gt;
                          &lt;h6 class=&quot;card-title&quot;&gt;${student.name}&lt;/h6&gt;
                          &lt;p class=&quot;card-text&quot;&gt;${student.gender}&lt;br /&gt;${student.email}&lt;br /&gt;${student.website}&lt;br /&gt;${student.skills}&lt;/p&gt;
                          
                      &lt;/div&gt;
              &lt;/div&gt;
              `;
          }).join(&quot;&quot;)
      }`
  
      
      const studentImages = document.getElementById(&quot;student-images&quot;);
      console.log(enrolledStudents)
      studentImages.innerHTML = `${
          enrolledStudents.map(student =&gt; {
              return `
                  &lt;div class=&quot;row&quot; id=&quot;student-id-image&quot; style=&quot;border: 2px solid black;  border-top: none; border-left: none; height: 120px&quot;&gt;
                      &lt;div class=&quot;col&quot; style=&quot;padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;&quot;&gt;
                          &lt;img src=${student.imageLink}&gt;&lt;/img&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              `
          }).join(&quot;&quot;)
      }`
      setTimeout(changeIds, 3000);
  }
  
  const changeIds = () =&gt; {
      var oldId = document.getElementById(&quot;student-id-details&quot;);
      oldId.id = &quot;no-animation&quot;;
      console.log(document.querySelectorAll(&quot;#student-id-details&quot;));
      console.log(document.querySelectorAll(&quot;#no-animation&quot;));
  }
  </code></pre>
  <p>I cannot use any library or framework for doing this task.
  In changeIds function, I am changing the ID. When I keep adding new entries there is only 1 node in no-animation NodeList (the first entry) and after that no ID change is taking effect.</p>
  <p>What can be the problem here?</p>
  <p>My html code for reference -</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;title&gt;Student Enrollment&lt;/title&gt;
      &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; /&gt;
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      
          &lt;nav class=&quot;navbar text-center&quot; style=&quot;background-color: #59CE8F;&quot;&gt;
              &lt;div class=&quot;container-fluid text-center&quot;&gt;
                &lt;span class=&quot;navbar-brand mb-0 h1 text-center&quot; style=&quot;color: white;&quot;&gt;Student Enrollment Form&lt;/span&gt;
              &lt;/div&gt;
            &lt;/nav&gt;
            
      &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col&quot; style=&quot;height: 35px;&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;row&quot;&gt;
  
          &lt;div class=&quot;col&quot; style=&quot;border-right: 3px solid #59CE8F;&quot;&gt; 
  
            &lt;form id=&quot;student-enrollment-form&quot;&gt;
            &lt;div class=&quot;row mb-3&quot;&gt;
              &lt;label for=&quot;name-input&quot; class=&quot;col-sm-2 col-form-label&quot;&gt;Name&lt;/label&gt;
              &lt;div class=&quot;col-sm-5&quot;&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;name-input&quot;/&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;row mb-3&quot;&gt;
              &lt;label for=&quot;email-input&quot; class=&quot;col-sm-2 col-form-label&quot;&gt;E-Mail&lt;/label&gt;
              &lt;div class=&quot;col-sm-5&quot;&gt;
                &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;email-input&quot; required/&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;row mb-3&quot;&gt;
              &lt;label for=&quot;website-input&quot; class=&quot;col-sm-2 col-form-label&quot;&gt;Website&lt;/label&gt;
              &lt;div class=&quot;col-sm-5&quot;&gt;
                &lt;input type=&quot;url&quot; class=&quot;form-control&quot; id=&quot;website-input&quot; required/&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;row mb-3&quot;&gt;
              &lt;label for=&quot;imglink-input&quot; class=&quot;col-sm-2 col-form-label&quot;&gt;Img Link&lt;/label&gt;
              &lt;div class=&quot;col-sm-5&quot;&gt;
                &lt;input type=&quot;url&quot; class=&quot;form-control&quot; id=&quot;imglink-input&quot; required/&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;fieldset class=&quot;row mb-3&quot;&gt;
              &lt;legend class=&quot;col-form-label col-sm-2 pt-0&quot;&gt;Gender&lt;/legend&gt;
              &lt;div class=&quot;col-sm-10&quot;&gt;
                &lt;div class=&quot;form-check&quot;&gt;
                  &lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; name=&quot;genderRadio&quot; id=&quot;gridRadios1&quot; value=&quot;male&quot; id=&quot;male-input&quot; checked&gt;
                  &lt;label class=&quot;form-check-label&quot; for=&quot;gridRadios1&quot;&gt;
                    Male
                  &lt;/label&gt;
                &lt;/div&gt;
                &lt;div class=&quot;form-check&quot;&gt;
                  &lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; name=&quot;genderRadio&quot; id=&quot;gridRadios2&quot; value=&quot;female&quot; id=&quot;female-input&quot;&gt;
                  &lt;label class=&quot;form-check-label&quot; for=&quot;gridRadios2&quot;&gt;
                    Female
                  &lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/fieldset&gt;
  
            &lt;div class=&quot;row mb-3&quot;&gt;
              &lt;label for=&quot;skills&quot; class=&quot;col-sm-2 col-form-control&quot;&gt;Skills&lt;/label&gt;
              &lt;div class=&quot;col-sm-2&quot;&gt;
                &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; id=&quot;java-gridCheck&quot; value=&quot;Java&quot;&gt;
                &lt;label class=&quot;form-check-label&quot; for=&quot;gridCheck&quot;&gt;
                  JAVA
                &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-sm-2&quot;&gt;
                &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; id=&quot;html-gridCheck&quot; value=&quot;HTML&quot;&gt;
                &lt;label class=&quot;form-check-label&quot; for=&quot;gridCheck&quot;&gt;
                  HTML
                &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-sm-2&quot;&gt;
                &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; id=&quot;css-gridCheck&quot; value=&quot;CSS&quot;&gt;
                &lt;label class=&quot;form-check-label&quot; for=&quot;gridCheck&quot;&gt;
                  CSS
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;row mb-3&quot;&gt;
              &lt;div class=&quot;col-4&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; onclick=&quot;getStudentDetails(event)&quot;&gt;Enroll Student&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-2&quot; style=&quot;margin-left: -30px;&quot;&gt;
                &lt;button type=&quot;clear&quot; class=&quot;btn btn-danger&quot;&gt;Clear&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
  
          &lt;/div&gt;
            
          &lt;/form&gt;
  
  
          &lt;div class=&quot;col&quot; id=&quot;student-ids&quot;&gt;
            &lt;h3 id=&quot;right-col-header&quot;&gt;Enrolled Students&lt;/h3&gt;
            &lt;div class=&quot;row mb-4&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-2&quot;&gt;&lt;/div&gt;
  
              &lt;div class=&quot;col-5&quot; style=&quot;text-align: left;&quot;&gt;
                &lt;div class=&quot;row&quot; style=&quot;border: 2px solid black;&quot;&gt;
                  &lt;div class=&quot;col&quot;&gt;
                    Description
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;student-list-division&quot; id=&quot;student-list&quot;&gt;
                  
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;col-3&quot; style=&quot;align-items: centre;&quot;&gt;
                &lt;div class=&quot;row&quot; style=&quot;border: 2px solid black; border-left: none;&quot;&gt;
                  &lt;div class=&quot;col&quot;&gt;
                    Image
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;student-list-images&quot; id=&quot;student-images&quot;&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;col-2&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      
      &lt;script src=&quot;script_js.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>My css code for animation -</p>
  <pre><code>#right-col-header{
      text-align: center;
  }
  ul{
      padding-left: 0;
      list-style-type: none;
  }
  p{
      font-size: 13px;
  }
  img{
      height: 6em;
      width: 6em;
  }
  #student-ids{
      height: 90%;
      overflow-x: auto;
  }
  
  #student-id-image{
      animation: fadeIn 2s;
      -webkit-animation: fadeIn 2s;
  }
  
  @keyframes fadeIn {
      0% { opacity: 0; }
    100% { opacity: 1; }  
  }
  
  
  #student-id-details{
      animation: fadeIn 2s;
      -webkit-animation: fadeIn 2s;
  }
  </code></pre>
  <p>I would appreciate different solutions for achieving animations in new entries only too.</p>