Add button to the bottom of a gridPanel using JavaScript/HTML

Question

I'm new to JavaScript and need some assistance. I've managed to add buttons on the toolbar, however, I've now trying to add a button at the bottom of a gridPanel and not sure how to do so. I have 3 gridPanels defined within this form

'''

<form>
  <gridPanel domain="GridPanel1" inlineEdit="true" linkType="editPopup" validationFormula="items.length > 0" validationMessage="At least 1 Driver is mandatory on the Drivers screen">
  </gridPanel>
  
  <gridPanel if="Status:eq:D" domain="Note" title="Notes" inlineEdit="true" editableGrid="True" />
  <gridPanel if="Status:eq:D" domain="Task" filter="ParentID={Proposal.ProposalID-#}" inlineEdit="true" title="Tasks" newQueryString="ParentID={Proposal.ProposalID-#}&amp;&amp;ParentDomainID=60"/> 
  <scriptPanel>
    
    <!-- Order button --> 
    var orderMVRButton = document.createElement('button');
    orderMVRButton.innerHTML="Order MVR";
    orderMVRButton.style.display = 'block';
    orderMVRButton.style.margin = '0 auto';
    document.body.append(orderMVRButton);
</scriptPanel>
 
</form>

'''

This is the code I have so far and I see the button being added to the middle of the screen, however, the "Order button" needs to look like the picture below. it should be under the first gridPanel and depending on how many records keep getting added to it, the button position should be dynamic. How can I best implement that? What in the gridPanel can I use in the "document.body.append" to tell it to put the button in the right place.

Answer 1

"Order Button" needs to be right side of the position and here is js code below.

<!-- Order button --> 
var orderMVRButton = document.createElement('button');
orderMVRButton.innerHTML="Order MVR";
orderMVRButton.style.display = 'block';
orderMVRButton.style.margin = '0 0 0 auto';
document.body.append(orderMVRButton);