Как щелкнуть по записи в таблице и найти ее в другой коллекции mongodb (php/jquery)

Я заполнил таблицу html документами из моей коллекции MongoDB под названием "modules". Мой документ выглядит так:

{
    "_id" : ObjectId("59859f9bd5234d8d415eb0ca"),
    "name" : "Module A",
    "weight" : 18,
    "components" : [ "cid1", "cid2","cid3", "cid4","cid5"],
    "color" : "blue"
}

Моя структура строк HTML:

<tr>
    <th scope="row">1
    </th><td>Module A</td>
    <td>18kg</td>
    <td>
        <a href="cid1">Component 1</a>
        <a href="cid2">Component 2</a>
        <a href="cid3">Component 3</a>
        <a href="cid4">Component 4</a>
        <a href="cid5">Component 5</a>  
    </td>       
    <td>blue</td>
</tr>

Для моего подключения я использовал (нашел в учебнике):

$manager = new MongoDB\Driver\Manager("mongodb://localhost:27017");
$filter = [];
$options = [
    'sort' => ['_id' => 1],
];

$query = new MongoDB\Driver\Query($filter, $options);
$cursor = $manager->executeQuery('workshop.modules', $query);

Документ из коллекции "components":

{
    "_id" : ObjectId("5985ca81d5234d8d415eb421"),
    "name" : "Component 2",
    "weight" : 1,
    "price" : 10,
    "color" : "blue"
}

Ниже я не знаю, как это сделать:

Нажмите на один из этих компонентов, например "Компонент 2". Поиск в другой коллекции с именем "components" для этой записи (с именем или идентификатором компонента) и показать информацию об этом компоненте в новом окне или всплывающем окне.

Как это можно реализовать с помощью php/jquery/mongodb?

PS: Вы также можете изменить/улучшить мою структуру json, если это необходимо.

UPDATE:

Вот мой исходный код app.php:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'; return false;" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Custom CSS for Table -->
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<?php
$manager = new MongoDB\Driver\Manager("mongodb://localhost:27017");

$filter = [];
$options = [
    'sort' => ['_id' => 1],
];

$query = new MongoDB\Driver\Query($filter, $options);
$cursor = $manager->executeQuery('workshop.modules', $query);
?>
    <div class="form-group pull-right">
        <input type="text" class="search form-control" placeholder="What you looking for?">
    </div>
    <span class="counter pull-right"></span>
    <table class='table table-striped results'>
    <thead class="thead-inverse">
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Weight</th>
            <th>Components</th>
            <th>Color</th>
        </tr>
            <tr class="warning no-result">
      <td colspan="4"><i class="fa fa-warning"></i> No result</td>
    </tr>
    </thead>
    <?php 
    $i=1; 
    foreach ($cursor as $document) {
    ?>
    <tr>
        <th scope="row"><?php echo $i; ?></td>
        <td><?php echo $document->name;  ?></td>
        <td><?php echo $document->weight;  ?>kg</td>
        <td>
            <?php 
            $components = $document->components;
            foreach($components as $component) {
                echo "<a class='component' href=$component>".$component."</a>  ";
            }
            ?>
        </td>       
        <td><?php echo $document->color;  ?></td>
    </tr>
    <?php $i++;
    } 
    ?>
    </table>



    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <!-- Search function for table -->
    <script type="text/javascript" src="tablesearch.js"></script>
</body>
</html>

Мне нужно рабочее решение, которое работает с моим app.php. И, конечно, вы можете настроить приложение app.php, если это необходимо.

Ответ 1