Gallery Filtering using Jquery in Angular not working

Question

I am unable to call the jquery function from my angular html file. Basically, trying to apply filter on the gallery. When the cursor moves hovers over the another button it should display photos of those filter alone, however currently only 'All' photos are getting displayed and filtering isnt working. I have installed jquery and also added the below in the angular.json and restart the app, though not working. Any help to resolve this issue is highly appreciated.

    "scripts": ["node_modules/jquery/dist/jquery.min.js",
      "node_modules/jquery/dist/jquery.js"]

My html and js query is as below:

<div class="mydiv">
  <div align="center">
    <br>
    <section>
      <ul>
        <li class="list active" data-filter="all">All Images</li>
        <li class="list" data-filter="product">Product Images</li>
    <li class="list" data-filter="factory">Factory Images</li>
      </ul>
    </section>

  </div>

  <div><br></div>
  <div class="column">
    <div class="row">

      <div class="responsive">
        <div class="gallery">
          <div class="itemBox product"><img src="assets/Images/f3.jpeg"  width="300" height="200"></div>
        </div>
      </div>


      <div class="responsive">
        <div class="gallery">
          <div class="itemBox factory"><img src="assets/Images/f4.jpeg"  width="300" height="200"></div>
        </div>
      </div>

      <div class="responsive">
        <div class="gallery">
          <div class="itemBox product"><img src="assets/Images/f8.jpg" width="300" height="200"></div>
        </div>
      </div>

      <div class="responsive">
        <div class="gallery">
          <div class="itemBox factory"><img src="assets/Images/f2.jpeg"  width="300" height="200"></div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="responsive">
        <div class="gallery">
          <div class="itemBox product"><img src="assets/Images/f3.jpeg"  width="300" height="200"></div>
        </div>
      </div>


      <div class="responsive">
        <div class="gallery">
          <div class="itemBox factory"><img src="assets/Images/f4.jpeg"  width="300" height="200"></div>
        </div>
      </div>
      <div class="responsive">
        <div class="gallery">
          <div class="itemBox factory"><img src="assets/Images/f8.jpg" width="300" height="200"></div>
        </div>
      </div>

      <div class="responsive">
        <div class="gallery">
          <div class="itemBox product"><img src="assets/Images/f8.jpg" width="300" height="200"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="responsive">
      <div class="gallery">
        <div class="itemBox product"><img src="assets/Images/f3.jpeg"  width="300" height="200"></div>
      </div>
    </div>


    <div class="responsive">
      <div class="gallery">
        <div class="itemBox factory"><img src="assets/Images/f4.jpeg"  width="300" height="200"></div>
      </div>
    </div>
    <div class="responsive">
      <div class="gallery">
        <div class="itemBox product"><img src="assets/Images/f2.jpeg"  width="300" height="200"></div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <div class="itemBox factory"><img src="assets/Images/f3.jpeg" width="300" height="200"></div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.js"
            integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="function.js"></script>
  </div>
  <div class="clearfix"></div>
</div>

JS script:

$(document).ready(function(){
  $('.list').click(function(){
  const value = $(this).attr('data-filter');
  if (value == 'all'){
  $('.itemBox').show('1000');
  }
  else{
  $('.itemBox').not('.'+value).hide('1000');
    $('.itemBox').filter('.'+value).show('1000');
  }
  })
  //
  $('.list').click(function(){
  $(this).addClass('active').siblings().removeClass('active');
  })