Selected Items Table: Demo

Output:

Your Selected Items

Srl. No.		Table No.		Customer Name
Date-Time		Mobile No.		Email

Sl. No.	Items	Rate	-	Quantity	+	Remove	Amount Rs.
Total Amount Rs.:							0.00

Code:

CSS:

HTML:

<div id="customerInfoBox" style="

  border: 1px solid #ccc; 

  border-radius: 13px; 

  padding: 10px; 

  width: 400px;

  margin: 0 auto;

  margin-top: 50px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

">

  <div style="border-top-left-radius: 10px; border:1px solid #ccc; border-top-right-radius: 10px;border-top-left-radius: 10px; text-align: center;">

    <h2>Your Selected Items</h2>

  </div>

  

  <!-- 🔷 Customer Info -->

  <table style="width:100%; border-collapse:collapse;margin-bottom: 20px; background-color: whitesmoke; width: 100%; ">

    <tr style="background-color: ; color: black;">

      <th style="padding:3px; border:1px solid #ccc;background-color:deepskyblue; color: white; width: 12%; font-weight: bold; ">Srl. No.</th>

      <td id="srlNoCell" style="padding:3px; border:1px solid #ccc; width: 10%;"></td>

      <th style="padding:3px; border:1px solid #ccc; background-color:deepskyblue; color: white; width: 12%; font-weight: bold;">Table No.</th>

      <td id="tableNoCell" style="padding:3px; border:1px solid #ccc; width: 15%;"></td>

      <th style="padding:3px; border:1px solid #ccc;background-color:deepskyblue; color: white; width: 20%;">Customer Name</th>

      <td id="customerNameCell" style="padding:3px; border:1px solid #ccc; width: 29%;"></td>

      

    </tr>

    <tr>

      <th style="padding:3px; border:1px solid #ccc; background-color:deepskyblue; color: white; width: 12%;">Date-Time</th>

      <td id="dateTimeCell" style="padding:3px; border:1px solid #ccc; width: 10%;"></td>

      <th style="padding:3px; border:1px solid #ccc; background-color:deepskyblue; color: white; width: 12%;">Mobile No.</th>

      <td id="mobileNoCell" style="padding:3px; border:1px solid #ccc; width: 15%;"></td>

      <th style="padding:3px; border:1px solid #ccc; background-color:deepskyblue; color: white; width: 20%;">Email</th>

      <td id="emailCell" style="padding:3px; border:1px solid #ccc;width: 29%;"></td>

    </tr>

  </table>

  

   <!--🔷 Item Info-->

<!--Rows injected by JS--><table id="selectedItemsTable" style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: collapse; width: 100%;">

  <thead>

    <tr style="background-color: deepskyblue; color: white;">

      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 6%;">Sl. No.</th>

      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 46%;">Items</th>

      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 8%;">Rate</th>

      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 5%;">-</th>

      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 10%;">Quantity</th>

      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 5%;">+</th>

      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 10%;">Remove</th>

      <th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 10%;">Amount Rs.</th>

</tr>

 </thead>

  <tbody id="selectedItemsBody">

    <!-- Rows injected by JS -->

  </tbody>

  <tfoot>

    <tr>

      <td colspan="7" style="text-align:right; font-weight:bold; padding:10px 6px; border:1px solid #ccc; border-radius: bottom-left 10px; border-radius: bottom-right 10px;">Total Amount Rs.:</td>

      <td id="totalAmount" style="padding:10px 6px; font-weight:bold; border:1px solid #ccc;">0.00</td>

    </tr>

  </tfoot>

</table>

<!-- 🔹 Buttons Section -->

<div style="

  width: 100%; 

  background: #f9f9f9; 

  padding: 15px; 

  border-bottom-left-radius: 10px; 

  border-bottom-right-radius: 10px;

  border: 1px solid #aaa; 

  border-top: none;

  margin-top: -1px;

  box-sizing: border-box;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  align-items: center;

  gap: 10px;

">

  

  <!-- 🔹 Left Group: Submit, Close, Refresh -->

  <div style="display: flex; gap: 20px; flex-wrap: wrap;">

    <button onclick="submitOrder()" style="

      padding: 10px 25px;

      background-color: #28a745;

      color: white;

      border: none;

      border-radius: 6px;

      font-size: 25px;

      cursor: pointer;

    " onmouseover="this.style.backgroundColor='#218838'" onmouseout="this.style.backgroundColor='#28a745'">Submit</button>

    

    <button onclick="closePopup()" style="

      padding: 10px 25px;

      background-color: #ff7d66;

      color: white;

      border: none;

      border-radius: 6px;

      font-size: 25px;

      cursor: pointer;

    " onmouseover="this.style.backgroundColor='#ff5233'" onmouseout="this.style.backgroundColor='#ff7d66'">Close</button>

    

    <button onclick="location.reload()" style="

      padding: 10px 25px;

      background-color: #17a2b8;

      color: white;

      border: none;

      border-radius: 6px;

      font-size: 25px;

      cursor: pointer;

    " onmouseover="this.style.backgroundColor='#138496'" onmouseout="this.style.backgroundColor='#17a2b8'">Refresh</button>

  </div>

  

<!-- 🔸 Right Side: Order form -->

<div style="

  display: flex;

  justify-content: flex-end;   /* Push button to right */

  text-align: right;;/* Add spacing inside */

  max-width: 700px;            /* Limit width to match form/table */

">

  <button onclick="openPaymentModal()" style="

    padding: 10px 25px;

    background-color: #6f42c1;

    color: white;

    border: none;

    border-radius: 6px;

    font-size: 20px;

    font-weight: bold;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

    cursor: pointer;

    transition: background-color 0.3s ease;

  "

  onmouseover="this.style.backgroundColor='#5936a3'"

  onmouseout="this.style.backgroundColor='#6f42c1'">

    Select Items

  </button>

</div>

</div>

</div>

JS: