如何从查询的弹性搜索结果中动态加载数据到模态？

Question

I have an index in elasticsearch and I can query it, resulting in an array of objects. I am able to list all the titles from the array. Now I would like to loop through the result so that when I press the details button, a modal with more details on that document opens. Is there any way to do this?

<?php
    if (isset($results)) {
        foreach ($results as $r) {
        ?>
        <div class="row justify-content-center">
            <div class="alert alert-success">
            <strong><?php echo $r['_source']['title']; ?></strong> || Date: <?php echo $r['_source']['date']; ?> <span id="showSearchTerm"></span></br>
            <a data-target="#myModal" data-toggle="modal" class="MainNavText" id="MainNavHelp" href="#myModal">Details</a>
            </div>
        </div>

            <!-- Modal -->
            <div id="myModal" class="modal fade" role="dialog">
              <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">

                  <div class="modal-header">
                    <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
                    <h2 class="modal-title"><?php echo $r['_source']['title']; ?></h2>
                  </div>

                  <div class="modal-body">
                    <p><?php echo $r['_source']['body']; ?></p>
                    <p><?php echo $r['_source']['path']['real']; ?></p>
                  </div>

                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>

              </div>
            </div>
            <?php

          }
        }
        ?>
    </div>
    <!--end of col-->
</div>
</div>

<script>
$('a[href$="#Modal"]').on( "click", function() {
   $('#Modal').modal('show');
});
</script>