How to add My Order section reorder link open popup model in magento 2

Question

How to add My Order section reorder link open popup model in magento 2

app/code/Vendorname/Modulename/view/frontend/templates/order/history.phtml

<?php


   /** @var \Magento\Sales\Block\Order\History $block */
 ?>
 <?php $_orders = $block->getOrders(); ?>
 <?= $block->getChildHtml('info') ?>
 <?php if ($_orders && count($_orders)) : ?>
<div class="table-wrapper orders-history">
    <table class="data table table-order-items history" id="my-orders-table">
        <caption class="table-caption"><?= $block->escapeHtml(__('Orders')) ?></caption>
        <thead>
            <tr>
                <th scope="col" class="col id"><?= $block->escapeHtml(__('Order #')) ?></th>
                <th scope="col" class="col date"><?= $block->escapeHtml(__('Date')) ?></th>
                <?= $block->getChildHtml('extra.column.header') ?>
                <th scope="col" class="col shipping"><?= $block->escapeHtml(__('Ship To')) ?></th>
                <th scope="col" class="col total"><?= $block->escapeHtml(__('Order Total')) ?></th>
                <th scope="col" class="col status"><?= $block->escapeHtml(__('Status')) ?></th>
                <th scope="col" class="col actions"><?= $block->escapeHtml(__('Action')) ?></th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($_orders as $_order) : ?>
                <tr>
                    <td data-th="<?= $block->escapeHtmlAttr(__('Order #')) ?>" class="col id"><?= $block->escapeHtml($_order->getRealOrderId()) ?></td>
                    <td data-th="<?= $block->escapeHtmlAttr(__('Date')) ?>" class="col date"><?= /* @noEscape */ $block->formatDate($_order->getCreatedAt()) ?></td>
                    <?php $extra = $block->getChildBlock('extra.container'); ?>
                    <?php if ($extra) : ?>
                        <?php $extra->setOrder($_order); ?>
                        <?= $extra->getChildHtml() ?>
                    <?php endif; ?>
                    <td data-th="<?= $block->escapeHtmlAttr(__('Ship To')) ?>" class="col shipping"><?= $_order->getShippingAddress() ? $block->escapeHtml($_order->getShippingAddress()->getName()) : '&nbsp;' ?></td>
                    <td data-th="<?= $block->escapeHtmlAttr(__('Order Total')) ?>" class="col total"><?= /* @noEscape */ $_order->formatPrice($_order->getGrandTotal()) ?></td>
                    <td data-th="<?= $block->escapeHtmlAttr(__('Status')) ?>" class="col status"><?= $block->escapeHtml($_order->getStatusLabel()) ?></td>
                    <td data-th="<?= $block->escapeHtmlAttr(__('Actions')) ?>" class="col actions">
                        <a href="<?= $block->escapeUrl($block->getViewUrl($_order)) ?>" class="action view">
                            <span><?= $block->escapeHtml(__('View Order')) ?></span>
                        </a>
                        <?php if ($this->helper(\Magento\Sales\Helper\Reorder::class)->canReorder($_order->getEntityId())) : ?>
                            <a href="#" data-post='<?= /* @noEscape */
                            $this->helper(\Magento\Framework\Data\Helper\PostHelper::class)
                                ->getPostData($block->getReorderUrl($_order))
                            ?>' class="action order">
                                <span><?= $block->escapeHtml(__('Reorder')) ?></span>
                            </a>
                        <?php endif ?>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
<?php if ($block->getPagerHtml()) : ?>
    <div class="order-products-toolbar toolbar bottom"><?= $block->getPagerHtml() ?></div>
<?php endif ?>
<?php else : ?>
   <div class="message info empty"><span><?= $block->escapeHtml(__('You have placed no orders.')) ?></span></div>

 <div id="popup-modal" style="display:none;">
  <h1> Reorder Data</h1>
 </div>

<script>
require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            title: 'popup modal title',
            buttons: [{
                text: $.mage.__('Continue'),
                class: '',
                click: function () {
                    this.closeModal();
                }
            }]
        };

        var popup = modal(options, $('#popup-modal'));
        $("#action-order").on('click',function(){ 
            $("#popup-modal").modal("openModal");
        });

    }
);