title: search bar does not show all relevant results when one letter is entered
body: <p>im trying to create a search that shows array object names. The more letters entered, the more narrow the search is. However, when i put in one letter, it only shows one result whereas the console.log shows several. The above image is the result i want when i enter the letter &quot;s&quot; but i want it as html text, but the below image is the result. I cant seem to find the issue, its happened on several of my practice projects, the console is able to detect all the names that relate to the entered letter(s) however html does not. Please can somebody tell me why the text is not showing up and how i can fix it, im sorry if this is a rookie mistake, i am a javascript beginner and this is my first solo practice project. Thank you</p>
  <p><a href="https://i.stack.imgur.com/C3vvW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C3vvW.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/cwI66.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cwI66.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var students = [{
          name: `Elon Musk`,
          present: 'true'
      },{
          name: `Bruce Wayne`,
          present: 'false'
      },{
          name: `Steve Rogers`,
          present: 'true'
      },{
          name: `SpiderMan`,
          present: 'true'
      },{
          name: `John Snow`,
          present: 'false'
      }, {
          name: 'Sonic',
          present: `true`
      }, {
          name: `Johnny Silverhand`,
          present: `false`
      }
      ]
  
      var totalStudents = document.createElement("h2")
      totalStudents.textContent = `Total Students: ${students.length}`
      document.querySelector("body").appendChild(totalStudents)
  
  
      var numOfAbs = students.filter(function (student) {
          return student.present === "true"
      })
  
      var absDisplay = document.createElement("h2")
      absDisplay.textContent = `Number of students present not present: ${numOfAbs.length}`
      document.querySelector("body").appendChild(absDisplay)
      
  
  
      document.querySelector("#ClassReg").addEventListener("click", function() {
          students.forEach(function (student) {
              var studentNames = document.createElement("p")
              studentNames.textContent = `${student.name} - ${student.present}`
              document.querySelector("#register").appendChild(studentNames)
              
          })
      })
  
  
      document.querySelector("#search-text").addEventListener('input',function (e){
              students.forEach(function (student) {
                  if (student.name.toLowerCase().includes(e.target.value.toLowerCase())) {
                      console.log(student.name)
                      document.querySelector("#register").innerHTML = ""
                      const logger = document.createElement("h4")
                      logger.textContent = student.name
                      document.querySelector("#register").appendChild(logger)
                  }
              })
      })
  
      document.querySelector("#search-text").addEventListener('input', function (e) {
          students.forEach(function (student) {
              if (e.target.value.includes(student.name.toLowerCase())){
                  student.present = 'true'
                  console.log(student.present, student.name)
              }
          })})
   
      </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Register&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Register&lt;/h1&gt;
      &lt;button&gt;Login&lt;/button&gt;
      &lt;button id="ClassReg"&gt;ClassReg&lt;/button&gt;
      &lt;input id="search-text" type="text" placeholder="Filter students"&gt;
      &lt;div id="register"&gt;
  
      &lt;/div&gt;
      &lt;script src="/registerDB/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>