How to create a select & option hierarchy of categories and subcategories (MVC)?

Question

I am creating a select & option system for a Marketplace, where selecting a category from the first select will generate another select with the subcategory options of the selected category.

However, so I don’t have to write value by value in the Java script, I wanted to use the array I’m using in HTML code.

How can I do that?

example of how I would like you to stay:

Follow the codes I’m using

MODEL:

    public function getCategory($data) {
        $sql = "SELECT name, oc_category.category_id, oc_category_path.level, oc_category.parent_id, oc_category_path.path_id
  FROM oc_category_description LEFT JOIN oc_category
    ON oc_category_description.category_id = oc_category.category_id
    LEFT JOIN oc_category_path ON oc_category_description.category_id = oc_category_path.category_id
    WHERE oc_category_description.language_id = 2";

$query = $this->db->query($sql);

    return $query->rows;
}

VIEW:

HTML

<select name="product-category" id='level0' size='10' class="form-control">
    <option value="teste0">--Select an Item--</option>

    <?php foreach($product_categories as $product_category){ ?>
        <?php if($product_category['parent_id'] == 300 && $product_category['level'] == 0){ ?>

            <option value="<?php echo $product_category['category_id'] ?>"><?php echo $product_category['name'] ?></option>

        <?php } ?>
    <?php } ?>

</select>

<select name='product-subcategory' id="level1" size='10' class="form-control">

            <option value="">--Select an Item--</option>

        <?php } ?>
    <?php } ?>

</select>

Javascript

<?php foreach($product_categories as $product_category){ ?>
	<?php if($product_category['parent_id'] == 59 && $product_category['level'] == 1){ ?>
$(document).ready(function () {
    $("#level0").change(function () {
        var val = $(this).val();
		if (val == "59") {		
            $("#level1").html("<option value="<?php $product_category['category_id']; ?>"><?php $product_category['name']; ?></option>
			");
        } else if (val == "teste0") {
            $("#level1").html("<option value=''>--select one--</option>");
        } 
    });
});
	<?php } ?>
<?php } ?>

CONTROLLER:

$data['product_categories'] = array();

    $category_info = $this->model_account_customerpartner->getCategory(); //$category_id

    foreach ($category_info as $category) {

        if ($category) {
            $data['product_categories'][] = array(
                'level'  => $category['level'],
                'name' => $category['name'],
                'parent_id' => $category['parent_id'],
                'path_id' => $category['path_id'],
                'category_id' => $category['category_id']
            );
        }
    }

Could someone help me with this? I would like to resolve as soon as possible.

Thanks in advance for the help!