How to search from two or more lists using list.js

I want to ask that how can I retrieve filtered results from two or more list using list.js

Let me explain using pictures:

Here's my HTML:

<div id="SearchBarContainer" class="col l10 offset-l1">
                        <input name="SearchData" class="search" placeholder="Search Anything !" />
                        <h1 class="McqHeading">MCQs</h1>
                        <ul class="list">
                            <li>
                                <p class="mcq">Mcqs One</p>
                            </li>
                            <li>
                                <p class="mcq">Mcqs Two</p>
                            </li>
                            <li>
                                <p class="mcq">Mcqs Three</p>
                            </li>
                            <li>
                                <p class="mcq">Mcqs Four</p>
                            </li>
                            <li>
                                <p class="mcq">Mcqs Five</p>
                            </li>
                        </ul>
                        <h1 class="NotesHeading">Notes</h1>
                        <ul class="list2">
                            <li>
                                <p class="note">Notes One</p>
                            </li>
                            <li>
                                <p class="note">Notes Two</p>
                            </li>
                            <li>
                                <p class="note">Notes Three</p>
                            </li>
                            <li>
                                <p class="note">Notes Four</p>
                            </li>
                            <li>
                                <p class="note">Notes Five</p>
                            </li>
                        </ul>
                    </div>

Here's the Javascript I'm using for this:

var options = {
valueNames: [ 'mcq','note' ],
listClasses: ['list','list2']
};

 var DownloadsList = new List('SearchBarContainer', options);

Here's the result that it produces:

When I typed b it only checked in the First list. I want the code to check in both lists.

Is there any way to do so?

Solution

Ok. Your issue had solved.I use two different containers and two diferrent list objects as shown below:

var options_1 = {
  valueNames: [ 'mcq' ]
};
    
var options_2 = {
  valueNames: [ 'note' ]
};

var list1 = new List("SearchBarContainer_1",options_1);
var list2 = new List("SearchBarContainer_2",options_2);

$(".search").keyup(function(){
    list1.search($(this).val());
    list2.search($(this).val());
});

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name="SearchData" class="search" placeholder="Search Anything !" />
    <div id="SearchBarContainer_1" class="col l10 offset-l1">
                        
                        <h1 class="McqHeading">MCQs</h1>
                        <ul class="list">
                          
                            <li class="a">
                                <p class="mcq">Mcqs One</p>
                            </li>
                            <li class="a">
                                <p class="mcq">Mcqs Two</p>
                            </li>
                            <li class="a">
                                <p class="mcq">Mcqs Three</p>
                            </li>
                            <li class="a">
                                <p class="mcq">Mcqs Four</p>
                            </li>
                            <li class="a">
                                <p class="mcq">Mcqs Five</p>
                            </li>
                            </ul>
                            </div>
    <div id="SearchBarContainer_2" class="col l10 offset-l1">   
                        <h1 class="NotesHeading">Notes</h1>
                       <ul class="list">
                            <li class="b">
                                <p class="note">Notes One</p>
                            </li>
                            <li class="b">
                                <p class="note">Notes Two</p>
                            </li>
                            <li class="b">
                                <p class="note">Notes Three</p>
                            </li>
                            <li class="b">
                                <p class="note">Notes Four</p>
                            </li>
                            <li class="b">
                                <p class="note">Notes Five</p>
                            </li>
                         
                        </ul>
                    </div>