Reorder previous orders?

Is there a way I can create a button so that the items are in the invoice go into the cart to be reordered? This is what I have so far, but the items are not appearing in the cart

<main class="page-main">
                <div class="block">
                    <div class="container">
                        <ul class="breadcrumbs">
                            <li><a href="index.html"><i class="icon icon-home"></i></a></li>
                            <li style="text-transform: uppercase;">/<span>
    Your Order, #<perch:shop id="orderID" />
</span></li>
                        </ul>
                    </div>
                </div>
                <div class="container">
                    <!-- Two columns -->
                    <div class="row row-table">

                        <!-- Center column -->
                        <div class="col-md-12">
                            <!-- Page Title -->
                            <div class="page-title">
                                <div class="title">
                                    <h1 style="text-transform: uppercase;">
    Your Order, #<perch:shop id="orderID" />
</h1>
                                </div>
                            </div>
                            <!-- /Page Title -->

                            <div class="block">
                    <div class="container">
                        <div class="cart-table wishlist">
                            <div class="table-header">
                                <div class="photo">
                                    Product Image
                                </div>
                                <div class="name">
                                    Product Name
                                </div>
                                <div class="price">
                                    Quantity
                                </div>
                                <div class="price">
                                    Unit Price
                                </div>
                                <div class="price">
                                    Total Price
                                </div>
                            </div>
                             <perch:orderitems>
                            <div class="table-row">
                                <div class="photo">
                                    <img src="<perch:orderitem id="image" />" alt="<perch:shop id="title"/>">
                                </div>
                                <div class="name">
                                    <perch:orderitem id="title" />
                                    <perch:orderitem id="variant_desc" />
                                </div>
                                <div class="price">
                                    <perch:orderitem id="quantity" />
                                </div>
                                <div class="price">
                                    <perch:orderitem id="price_without_tax" type="hidden" format="$:%.2n" />
                                </div>
                                <div class="price">
                                    <perch:orderitem id="total_without_tax" type="hidden" format="$:%.2n" />
                                </div>
                            </div>
                            </perch:orderitems>
                        </div>
                        <div class="row">
                        <div class="col-md-3">
                            <perch:form id="add_to_cart" app="perch_shop" action="cart.php">
    <perch:if exists="has_variants">
      <perch:productopts>
        <h3><perch:productopt id="title" /></h3>
        <perch:productvalues>
          <perch:before><ul class="size-list"></perch:before>
            <li class="value">

                <perch:input id="options" class="form-control input-sm size-variants" name="opt-<perch:productvalue id="optionID" />[]"
                  value="<perch:productvalue id="valueID" />" type="radio" required="required" />
                <perch:productvalue id="valueTitle" />

            </li>
          <perch:after></ul></perch:after>
        </perch:productvalues>
      </perch:productopts>
    </perch:if>
    <br><br>
    <perch:input id="product" type="hidden" value="<perch:shop id="productID" type="hidden" env-autofill="false" />" />
    <perch:input type="submit" value="Add to cart" class="btn btn-lg btn-loading"/>
                    </perch:form>
                        </div>
                            <div class="col-md-3 total-wrapper">
                                <table class="total-price">
                                    <tr>
                                        <td>Date</td>
                                        <td><perch:shop id="orderCreated" type="date" format="d F Y H:i" /></td>
                                    </tr>
                                    <tr>
                                        <td>Status</td>
                                        <td><perch:shop id="orderStatus" format="UC" /></td>
                                    </tr>
                                    <tr>
                                        <td>Shipping</td>
                                        <td><perch:shop id="shipping_value" /></td>
                                    </tr>
                                    <tr class="total">
                                        <td>Grand Total</td>
                                        <td><perch:shop id="grand_total_formatted" /></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
    </div>
</div>