Jquery Bootstrap Accordion FAQ Search Case

Question

Working on a Jquery bootstrap accordion FAQ search facility - following some help from this post I'm 95% there, but need to modify to achieve: (1) searching in any case (it seems to ignore capitals); (2) search in the title as well as the body; (3) nice to have but not essential highlight the search term - not just the whole paragraph.

I've been working on it some time and tried multiple ways to achieve the above, but not quite getting it. The script here shows error in console - but not on jsfiddle....

Below is my working code - also here: https://jsfiddle.net/clappertrapp/kL7jyd3q/

jQuery(document).ready(function($) {

  // This section makes the search work.
  (function() {
    var searchTerm, panelContainerId;
    $('#accordion_search_bar').on('change keyup', function() {
      searchTerm = $(this).val().toLowerCase(); //<<<<<< how to ignore case in page?
      var collapse = $(".panel-group");
      if ($(this).val() != "") {
        //find panel default hide them
        collapse.find(".panel-default").hide();
        $(".panel-group .hiddennote").remove();
        $(".panel-group").append('<div class="hiddennote">Hidden - clear search result to unhide</div>');

        //loop through panel group
        $(".panel-group, .panel-heading").each(function() {
          //check if matches
          collapse.find('.panel-collapse:contains(' + searchTerm + ')').parent().show().css({
            "background-color": "red"
          });
          $(".panel-heading").css({
            "background-color": "yellow"
          });
          //console.log('term=' + searchTerm)

        });
      } else {

        collapse.find(".panel-default").show().css({
          "background-color": ""
        });


        //show all and remove red bg 
      }
    });

  }());


  $('#resetbtn').click(function() {
    $('#accordion_search_bar').val("");
    $(".panel-group").find(".panel-default").show().css({
      "background-color": ""
    }); //show all remove red bg
    $(".panel-group .hiddennote").hide();
    $(".panel-heading").css({
      "background-color": ""
    });

  });

});

// main
#page_container {
  margin-top: 15px;
  margin-bottom: 15px;
}

// search input
#accordion_search_bar_container {
  position: relative;
  &:after {
    content: '\e003';
    font-family: Glyphicons Halflings;
    width: 18px;
    height: 18px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin: 20px;
  }
  #accordion_search_bar {
    display: block;
    margin: 20px auto;
    width: 100%;
    padding: 27px 10px;
    border: 1px solid $grey;
    border-radius: 25px;
    outline: 0;
  }
}

// make all the line clickable
.panel-title./colors //$grey: #cacaca;
// main
#page_container {
  margin-top: 15px;
  margin-bottom: 15px;
}

// search input
#accordion_search_bar_container {
  position: relative;
  &:after {
    content: '\e003';
    font-family: Glyphicons Halflings;
    width: 18px;
    height: 18px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin: 20px;
  }
  #accordion_search_bar {
    display: block;
    margin: 20px auto;
    width: 100%;
    padding: 27px 10px;
    border: 1px solid $grey;
    border-radius: 25px;
    outline: 0;
  }
}

// make all the line clickable
.panel-title a {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container" id="page_container">

  <div id="accordion_search_bar_container">
    <input type="search" id="accordion_search_bar" placeholder="Search" />
    <input type="button" id="accordion_search" value="Search in FAQs">
    <input type="button" id="resetbtn" value="Reset">


  </div>


  <h2 id="one">Section one - What is being amazed?</h2>
  <div class="panel-group" id="accordionname1">


    <div class="panel panel-default panel-even">
      <div class="panel-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionname1" href="#collapse10">
          <h5><i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>Tell me all about being amazed?</h5>
        </a>
      </div>
      <div id="collapse10" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>Doing amazing things is amazing</p>
        </div>
      </div>
    </div>

    <div class="panel panel-default panel-odd">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname1" href="#collapse11">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i> What's so great about being amazed?</h5>
        </a>
      </div>
      <div id="collapse11" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>You have to trust that it is amazing!</p>
        </div>
      </div>
    </div>

  </div>

  <h2 id="two">Section two - How to be amazed</h2>
  <div class="panel-group" id="accordionname2">

    <div class="panel panel-default panel-even">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname2" href="#collapse12">
          <h5><i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>Where do I sign up to become amazed?</h5>
        </a>
      </div>
      <div id="collapse12" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>You sign up at the Be Amazed sign up page</p>
        </div>
      </div>
    </div>

    <div class="panel panel-default panel-odd">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname2" href="#collapse13">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i> What happens once I am sign up to be amazed?</h5>
        </a>
      </div>
      <div id="collapse13" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>Once you've signed up, we'll be in touch to amaze you.</p>
        </div>
      </div>
    </div>

  </div>

  <h2 id="three">Section three - Refunds</h2>
  <div class="panel-group" id="accordionname3">

    <div class="panel panel-default panel-even">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname3" href="#collapse14">
          <h5><i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>I wasn't amazed - can I get a refund?</h5>
        </a>
      </div>
      <div id="collapse14" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>Well that's too bad, we did try to amaze you, but what we thought was amazing, you didn't. so we will give you an amazing credit.</p>
        </div>
      </div>
    </div>

    <div class="panel panel-default panel-odd">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname3" href="#collapse15">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i> What can I do with the credit?</h5>
        </a>
      </div>
      <div id="collapse15" class="panel-collapse collapse ">
        <div class="panel-body postclass">

          <p>Well, it's amazing because it's Useless of course!</p>
        </div>
      </div>
    </div>


  </div>
</div>