How I can change data fetched from data-base in view using JavaScript on clicking any html element like a tag or button tag or etc in Codeigniter?

in view

<li class="nav-item">
<a class="d-flex m-2 py-2 bg-light rounded-pill active" data-bs-toggle="pill" href="#tab-1">
<span class="text-dark" style="width: 130px;">All Products</span>
</a>
</li>
<li class="nav-item">
<a class="d-flex m-2 py-2 bg-light rounded-pill active" data-bs-toggle="pill" href="#tab-1">
<span class="text-dark" style="width: 130px;">Mango</span>
</a>
</li>

on click on “All Products” and “Mango” it fatch data from data base using “prductByCategory” function

public function prductByCategory($cat){
        $result = $this->Home_Model->getProductsbyCategoryname($cat);
        echo jeson_encode($result);
    }

model

public function getProductsbyCategoryname($cat){
        $sql = "SELECT  * FROM mst_products where mp_name = '{$cat}'";
        return $this->db->query($sql)->result_array();
    }

Now How can I Show the resultan data with out reloading the page. Need your help