Highlight Search Words with Button dropdowns

I've been doing a lot of research on this topic and I've been playing around with different code I'm finding online, but I'm stuck on the last part of this.

I have these buttons where you can click and open them up.

I need the search field to highlight the words that are input and automatically open the buttons and show only the divs the highlighted words are in.

I have two different scripts that work in different ways - one only shows the divs of the searched word, but no highlighting

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });
  });
});
</script>

and the other one highlights the words, but only if you open up the buttons.

<script>

const input = document.getElementById("myInput");
input.addEventListener("keyup", () => {
  const filter = input.value.toUpperCase();
  const paragraphs = document.querySelectorAll(".MSMatterscontent p");
  if (filter === '') {
    paragraphs.forEach(p => {
    p.innerHTML = p.textContent;
    });
  return;
}
  paragraphs.forEach(p =>{
    let txtValue = p.textContent;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      txtValue = txtValue.replace(
        new RegExp(filter, "gi"),
        '<span class="highlight">$&</span>');
      p.innerHTML = txtValue;
    } else {
      p.innerHTML = txtValue;
    }

  });
});

</script>

HTML

<body>

<br></br>
<div class="container">
  <input class="form-control" id="myInput" type="text" placeholder="Search...">
  <br></br>
  <div id="myDIV">
 <button type="button" class="collapsibleMSM">1) "New" Second Semester Schedule</button>
<div class="MSMatterscontent">
<p></p>
</P></p>
</p></p>
</div>

<button type="button" class="collapsibleMSM">2) Infractions and Providing Clarity and Consistency for Students</button>
<div class="MSMatterscontent">

Solution

You forgot to add css to the second JavaScript (the one who highlights words). Fixed exemple :

const input = document.getElementById("myInput");
input.addEventListener("keyup", () => {
  const filter = input.value.toUpperCase();
  const paragraphs = document.querySelectorAll(".MSMatterscontent p");
  if (filter === '') {
    paragraphs.forEach(p => {
    p.innerHTML = p.textContent;
    });
  return;
}
  paragraphs.forEach(p =>{
    let txtValue = p.textContent;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      txtValue = txtValue.replace(
        new RegExp(filter, "gi"), // new RegExp('^' + filter, "gi") would only get the classes starting with the search query 
        '<span class="highlight">$&</span>');
      p.innerHTML = txtValue;
    } else {
      p.innerHTML = txtValue;
    }

  });
});

/* Highlight */
.highlight{
  background-color: yellow;
}

/* Added some code to hide classes that don't match the search query */
.MSMatterscontent{
  display: none;
}

.MSMatterscontent:has(span.highlight){
  display: block !important;
}

<br>
<div class="container">
  <input class="form-control" id="myInput" type="text" placeholder="Search...">
  <br></br>
  <div id="myDIV">
  <div class="MSMatterscontent"><p>Math</p></div>
  <div class="MSMatterscontent"><p>Science</p></div>
  <div class="MSMatterscontent"><p>French</p></div>
  <div class="MSMatterscontent"><p>History</p></div>
  <div class="MSMatterscontent"><p>English</p></div>
  <div class="MSMatterscontent"><p>Biology</p></div>
 <button type="button" class="collapsibleMSM">1) "New" Second Semester Schedule</button>
 </div>