Submit a Modal Form that is inside a Main Form

Question

I have 2 forms on the same page. A base form and a modal form. The base form is the Quotation form and the Modal form is to add multiple items for the Quotation Form.

The Modal form is being submitted through jQuery and I was able to add items on my Quotation form. However, when I added the <form> tag on my base form, the Modal form is submitting the request to the base form action which is action="saveQuote.php".

Now, how can I handle multiple forms on the same page? I have tried Nesting of Forms but it doesn't work. Below are my codes:

my Forms;

<form id="saveQuoteForm" name="saveQuoteForm" action="saveQuote.php" method="POST">
<input type="text" id="addQuoteReferenceNumber">
<input type="text" id="addQuoteCompanyName">

<a data-toggle="modal" id="addItemsModalBtn" data-target="#addItemsModal" data-id="<?= $company ?>" data-ref="<?= $refNum ?>"> Add Item</a>

<!-- START ADD ITEM MODAL -->
<div class="modal fade" id="addItemsModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title"><i class="fa fa-plus"></i> Add Item</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <!-- Form -->
                <form id="addItemsForm" name="addItemsForm" action="addItems.php" method="POST">
                    <!-- Form Start -->
                    <section class="forms">
                        <div class="container-fluid">
                            <div id="add-QuoteItems-messages"></div>
                            <!-- Page Header-->
                            <div class="fetched-data"></div> <!-- Will show the list of added Items -->
                        </div>
                    </section>
                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="submit" id="addItemsBtn"> <i class="fa fa-check"></i> Add Item</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-power-off"></i> Close</button>
                    </div>
                </form>
                <!-- Form End -->
            </div>
            <!-- End Modal Body -->
        </div>
    </div>
</div>
<!-- END ADD ITEM MODAL -->


<div class="form-group">
    <button type="submit" id="saveQuoteBtn" name="saveQuoteBtn"> <i class="fa fa-save"></i> SAVE</button>
</div></form>

What I've tried so far was to add form="*formID*" in each <button> tag but still no luck.

<button type="submit" form="addItemsForm" id="addItemsBtn">
<button type="submit" form="saveQuoteForm" id="saveQuoteBtn">