Filter HTML Table using two DropDownList in jQuery

I want to filter the date having January 11, 2021 format and want to filter by two column Date and Month. Appreciate your help in advance. 

Please find the sample coding i am trying to sort. 

Thank you in Advance.

The Value input via (Advance custom field pro repeater field) acf pro date picker wordpress. 

<div class="container">
  <div class="row">
    <div class="col-4">
        <select id="regionDropdown">
          <option value="All">Select Year</option>
          <option value="2022">2022</option>
          <option value="2023">2023</option>
          <option value="2024">2024</option>
          <option value="2025">2025</option>
        </select>
  </div>
  <div class="col-4">
      <select id="roleDropdown">
          <option value="All">Select Month</option>
          <option value="January">January</option>
          <option value="February">February</option>
          <option value="March">March</option>
          <option value="April">April</option>
          <option value="">May</option>
          <option value="">June</option>
          <option value="">July</option>
          <option value="">August</option>
          <option value="">September </option>
          <option value="">October</option>
          <option value="">December</option>
        </select>
    </div>
</div>
        <table class="table">
            <thead>
                <tr>
                    <th> Arrival Date </th>
                    <th> Departure Date </th>
                    <th> Price </th>
                    <th> Status </th>
                    <th> No of Pax </th>
                    <th> Discount </th>
                </tr>
            </thead>
            <tbody id="download-forms-table-tbody">
                <tr>
                    <td> January 11, 2022 </td>
                    <td> January 17, 2022 </td>
                    <td> USD $450 </td>
                    <td> Available </td>
                    <td> 10 </td>
                    <td> 10 % </td>
                    <td>
                        <div class="btn btn-primary">Book Now</div>
                    </td>
                </tr>
                <tr>
                    <td> February 13, 2021 </td>
                    <td> February 17, 2021 </td>
                    <td> USD $450 </td>
                    <td> Available </td>
                    <td> 10 </td>
                    <td> 10 % </td>
                    <td>
                        <div class="btn btn-primary">Book Now</div>
                    </td>
                </tr>
                <tr>
                    <td> March 21, 2023 </td>
                    <td> march 28, 2023 </td>
                    <td> USD $450 </td>
                    <td> Available </td>
                    <td> 10 </td>
                    <td> 10 % </td>
                    <td>
                        <div class="btn btn-primary">Book Now</div>
                    </td>
                </tr>
                <tr>
                    <td> December 11, 2022 </td>
                    <td> December 17, 2022 </td>
                    <td> USD $450 </td>
                    <td> Available </td>
                    <td> 10 </td>
                    <td> 10 % </td>
                    <td>
                        <div class="btn btn-primary">Book Now</div>
                    </td>
                </tr>
                <tr>
                    <td> June 11, 2022 </td>
                    <td> July 17, 2022 </td>
                    <td> USD $450 </td>
                    <td> Available </td>
                    <td> 10 </td>
                    <td> 10 % </td>
                    <td>
                        <div class="btn btn-primary">Book Now</div>
                    </td>
                </tr>
                <tr>
                    <td> August 11, 2022 </td>
                    <td> August 17, 2022 </td>
                    <td> USD $450 </td>
                    <td> Available </td>
                    <td> 10 </td>
                    <td> 10 % </td>
                    <td>
                        <div class="btn btn-primary">Book Now</div>
                    </td>
                </tr>
            </tbody>
        </table>        

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <script>
            $('.container').on("change", 'select', function() {
                var region = $('.fixed-year').val().toLowerCase(),
                    role = $('.fixed-month').val().toLowerCase();


                var table = $("#download-forms-table-tbody");
                var trs = table.find('tr');
                trs.hide();

                var filtered = trs.filter(function(index, elem) {
                    var tds = $(elem).find('td');
                    if (region !== "all" && tds.eq(1).text().trim().toLowerCase() !== region) {
                        return false;
                    }
                    if (role !== "all" && tds.eq(2).text().trim().toLowerCase() !== role) {
                        return false;
                    }
                    return true;
                })

                filtered.show();

                if (filtered.length == 0) {
                    alert("No Records Found!!!");
                }
            });

            function myFunction() {
                // Declare variables
                var input, filter, table, tr, td, i, txtValue;
                input = document.getElementById("myInput");
                filter = input.value.toUpperCase();
                table = document.getElementById("fixed-depart");
                tr = table.getElementsByTagName("tr");

                // Loop through all table rows, and hide those who don't match the search query
                for (i = 0; i < tr.length; i++) {
                    td = tr[i].getElementsByTagName("td")[0];
                    if (td) {
                        txtValue = td.textContent || td.innerText;
                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }
            }
        </script>