May be there is some silly mistake I made. It's been 2 days I can't figure out the error. Here is what I want to achieve: When I type something on my search box the blocks which matches with my search there display will be block and others display will be none. Here is my HTML below.

<form class="d-flex">
  <input id="searchInput" class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>

Here is the JavaScript Code. The problem is actually here. From the includes part it's not working properly.:

const search = document.getElementById('searchInput');
search.addEventListener('input', function(){
    const inputValue = search.value.toLowerCase();
    const noteCard = document.getElementsByClassName('cards');
    Array.from(noteCard).forEach(function(element){
        const cardTxt = element.getElementsByTagName('p')[0].innerText;
        console.log(typeof cardTxt)
        if(cardTxt.includes(inputValue)){
            console.log("yes included");
            element.style.display = 'block';
        }
        else{
            console.log('not included')
            element.style.display = 'none';

        }
    })
})

You may think what is cards, please have a look:

let html= "";
    noteArray.forEach(function(element, index){
        html +=`
        <div class="card my-2 mx-2 cards" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Note ${index + 1}</h5>
          <p class="card-text">${element}</p>
          <button id=${index} onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</button>
        </div></div>
        `;

I can't find a error. If you can figure it out. Please let me know. You may need to see the full code. Here is my codepen link: https://codepen.io/techsinkv1/project/editor/Zvdvrg