Dropdown Filter by product or items

I just made a simple front-end page using HTML and CSS. this page has two kinds of products which are a camera and dvr. i want to filter the camera when I select the camera from the dropdown and the same with the dvr. but I don’t know how to do this. I tried to use list.js but didn’t work.

this is my HTML code for the page.
Filter code part

<nav class="product-filter">
        <h1>Security Products</h1>
        <div class="sort">
          <div class="collection-sort">
            <label>Filter by:</label>
            <select id="list" onchange="getSelectedValue()">
              <option selected="selected">Select a product</option>
              <option value="camera">Camera</option>
              <option value="dvr">DVR</option>

Product card code(1st one is the camera. 2nd one is DVR)

      <section class="products">
        <div class="product-card camera">
            <div class="product-image">
                <img src="assets/images/services/hikvision/1.jpg">
                <span id="item-description">CAMERA</span>
            <div class="product-info">
                <h5>Hikvision ColorVu Series</h5>
        <div class="product-card dvr">
            <div class="product-image">
                <img src="assets/images/services/hikvision/2.jpg">
                <span id="item-description">DVR</span>
            <div class="product-info">
                <h5>Hikvision Value Series</h5>

Additionally, I have added to get the value from dropdown using JS. it only shows the value in the console.

        function getSelectedValue() {
            var selectValue = document.getElementById("list").value;


Source: Ask Javascript Questions