Can someone correct this js script. When I search "keyword2" or "keyword3" it shows the list items and their children containing these keywords but also shows the siblings and their children which contain different keywords, e.g. "keyword4" or "keyword5". I believe the issue is within the last 5 lines of JS. Also can you make the script non-case sensitive. Thanks.
const $input = document.querySelector("#myInput");
$input.addEventListener("input", (e) => {
const query = e.target.value;
const $ul = document.querySelector("ul");
const $lis = $ul.querySelectorAll("li");
const $matchedLis = [...$lis].filter(($li) => $li.textContent.match(query));
[...$lis].forEach(($li) => $li.classList.add("hide"));
[...$matchedLis].forEach(($li) => {
$li.classList.remove("hide");
[...$li.querySelectorAll("li")].map(($li) => $li.classList.remove("hide"));
});
});.hide {
display: none;
}<html>
<body>
<input type="text" id="myInput" placeholder="Search through notes" title="Type in a keyword">
<ul id="List">
<li>
Parent 1 keyword1
<ul>
<li>
Child keyword2
<ul>
<li>"Grand" Child keyword3</li>
</ul>
</li>
<li>
Child keyword4
<ul>
<li>"Grand" Child keyword5</li>
</ul>
</li>
</ul>
</li>
<li>
Parent 2 keyword6
<ul>
<li>
Child keyword7
<ul>
<li>"Grand" Child keyword8</li>
</ul>
</li>
<li>
Child keyword9
<ul>
<li>"Grand" Child keyword10</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>