Add undo and redo buttons to selection/list

Trying to add a undo and redo button to the lists on this simple page.

If you select Customer or Mechanic, then parts, the parts are calculated up and displayed when you click show summary. I want an undo and redo button incase someone misclicks:

Tried CSS and JavaScript versions, cant seem to get them to work

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>document.addEventListener('DOMContentLoaded', (event) => {
updateTotal();
});
function CustomerFunc() {
var x = document.getElementById("ListDiv");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function selectItem(name, price) {
const selectedItems = JSON.parse(localStorage.getItem('selectedItems')) || {};
if (selectedItems[name]) {
selectedItems[name].count++;
} else {
selectedItems[name] = {
price: price,
count: 1
};
}
localStorage.setItem('selectedItems', JSON.stringify(selectedItems));
updateTotal();
}
function updateTotal() {
const selectedItems = JSON.parse(localStorage.getItem('selectedItems')) || {};
const repairCost = parseInt(document.getElementById('repairCost').value) || 0;
const totalPriceElement = document.getElementById('totalPrice');
const selectedItemsElement = document.getElementById('selectedItems');
const selectedItemsListElement = document.getElementById('selectedItemsList');
let total = 0;
selectedItemsElement.innerHTML = '';
selectedItemsListElement.innerHTML = '';
for (const [name, info] of Object.entries(selectedItems)) {
const itemTotal = info.price * info.count;
total += itemTotal;
const formattedItemTotal = formatNumberWithCommas(itemTotal);
const itemElement = document.createElement('p');
itemElement.innerHTML = `${name} x${info.count} - $${formattedItemTotal}`;
selectedItemsElement.appendChild(itemElement);
// Add to the selected items list
for (let i = 0; i < info.count; i++) {
const listItemElement = document.createElement('span');
listItemElement.textContent = `${name}, `;
//selectedItemsListElement.appendChild(listItemElement);
}
}
total += repairCost;
const formattedTotal = formatNumberWithCommas(total);
totalPriceElement.textContent = formattedTotal;
}
function resetTotal() {
localStorage.removeItem('selectedItems');
updateTotal();
resetSummary();
}
function showSummary() {
const selectedItems = JSON.parse(localStorage.getItem('selectedItems')) || {};
// Check if there are selected items
if (Object.keys(selectedItems).length > 0) {
const summaryElement = document.getElementById('summary');
let upgradesPurchased = "";
let resprays = "";
for (const [name, info] of Object.entries(selectedItems)) {
if (name.includes("Respray")) {
resprays += `${name.charAt(0)}/`
} else {
upgradesPurchased += `${name}, `;
}
}
//remove last slash
if (resprays) {
resprays = resprays.slice(0, -1)
resprays += " Respray"
upgradesPurchased += resprays
} else {
upgradesPurchased = upgradesPurchased.slice(0, -2);
}
const repairCost = parseInt(document.getElementById('repairCost').value) || 0;
const total = calculateTotal(selectedItems) + repairCost;
const formattedTotal = formatNumberWithCommas(total);
const summaryMessage = `<span class="data-label">Customer Name:</span> ${document.getElementById('customerName').value}<br>
<span class="data-label">Vehicle | Make/Model:</span> ${document.getElementById('vehicleMakeModel').value}<br>
<span class="data-label">Plate:</span> ${document.getElementById('plate').value}<br>
<span class="data-label">Upgrades Purchased:</span> ${upgradesPurchased}<br>
<span class="data-label">Price Charged:</span> $${formattedTotal}<br>
<span class="data-label">SHOP:</span> Mirror Park Repairs <br>
<span class="data-label">FTO:</span> ${document.getElementById('fto').value}`;
summaryElement.innerHTML = summaryMessage;
} else {
alert("No upgrades selected. Please select at least one item before showing the summary.");
}
}
function resetSummary() {
const summaryElement = document.getElementById('summary');
summaryElement.innerHTML = '';
}
function resetInfo() {
document.getElementById('customerName').value = '';
document.getElementById('vehicleMakeModel').value = '';
document.getElementById('plate').value = '';
}
function calculateTotal(selectedItems) {
let total = 0;
for (const info of Object.values(selectedItems)) {
total += info.price * info.count;
}
return total;
}
function formatNumberWithCommas(number) {
return number.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
}
function filterItems(searchTerm) {
const items = document.querySelectorAll('#itemList li');
items.forEach(item => {
const itemName = item.textContent.toLowerCase();
if (itemName.includes(searchTerm.toLowerCase())) {
item.style.display = 'flex';
} else {
item.style.display = 'none';
}
});
}</code>
<code>document.addEventListener('DOMContentLoaded', (event) => { updateTotal(); }); function CustomerFunc() { var x = document.getElementById("ListDiv"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } function selectItem(name, price) { const selectedItems = JSON.parse(localStorage.getItem('selectedItems')) || {}; if (selectedItems[name]) { selectedItems[name].count++; } else { selectedItems[name] = { price: price, count: 1 }; } localStorage.setItem('selectedItems', JSON.stringify(selectedItems)); updateTotal(); } function updateTotal() { const selectedItems = JSON.parse(localStorage.getItem('selectedItems')) || {}; const repairCost = parseInt(document.getElementById('repairCost').value) || 0; const totalPriceElement = document.getElementById('totalPrice'); const selectedItemsElement = document.getElementById('selectedItems'); const selectedItemsListElement = document.getElementById('selectedItemsList'); let total = 0; selectedItemsElement.innerHTML = ''; selectedItemsListElement.innerHTML = ''; for (const [name, info] of Object.entries(selectedItems)) { const itemTotal = info.price * info.count; total += itemTotal; const formattedItemTotal = formatNumberWithCommas(itemTotal); const itemElement = document.createElement('p'); itemElement.innerHTML = `${name} x${info.count} - $${formattedItemTotal}`; selectedItemsElement.appendChild(itemElement); // Add to the selected items list for (let i = 0; i < info.count; i++) { const listItemElement = document.createElement('span'); listItemElement.textContent = `${name}, `; //selectedItemsListElement.appendChild(listItemElement); } } total += repairCost; const formattedTotal = formatNumberWithCommas(total); totalPriceElement.textContent = formattedTotal; } function resetTotal() { localStorage.removeItem('selectedItems'); updateTotal(); resetSummary(); } function showSummary() { const selectedItems = JSON.parse(localStorage.getItem('selectedItems')) || {}; // Check if there are selected items if (Object.keys(selectedItems).length > 0) { const summaryElement = document.getElementById('summary'); let upgradesPurchased = ""; let resprays = ""; for (const [name, info] of Object.entries(selectedItems)) { if (name.includes("Respray")) { resprays += `${name.charAt(0)}/` } else { upgradesPurchased += `${name}, `; } } //remove last slash if (resprays) { resprays = resprays.slice(0, -1) resprays += " Respray" upgradesPurchased += resprays } else { upgradesPurchased = upgradesPurchased.slice(0, -2); } const repairCost = parseInt(document.getElementById('repairCost').value) || 0; const total = calculateTotal(selectedItems) + repairCost; const formattedTotal = formatNumberWithCommas(total); const summaryMessage = `<span class="data-label">Customer Name:</span> ${document.getElementById('customerName').value}<br> <span class="data-label">Vehicle | Make/Model:</span> ${document.getElementById('vehicleMakeModel').value}<br> <span class="data-label">Plate:</span> ${document.getElementById('plate').value}<br> <span class="data-label">Upgrades Purchased:</span> ${upgradesPurchased}<br> <span class="data-label">Price Charged:</span> $${formattedTotal}<br> <span class="data-label">SHOP:</span> Mirror Park Repairs <br> <span class="data-label">FTO:</span> ${document.getElementById('fto').value}`; summaryElement.innerHTML = summaryMessage; } else { alert("No upgrades selected. Please select at least one item before showing the summary."); } } function resetSummary() { const summaryElement = document.getElementById('summary'); summaryElement.innerHTML = ''; } function resetInfo() { document.getElementById('customerName').value = ''; document.getElementById('vehicleMakeModel').value = ''; document.getElementById('plate').value = ''; } function calculateTotal(selectedItems) { let total = 0; for (const info of Object.values(selectedItems)) { total += info.price * info.count; } return total; } function formatNumberWithCommas(number) { return number.toString().replace(/B(?=(d{3})+(?!d))/g, ","); } function filterItems(searchTerm) { const items = document.querySelectorAll('#itemList li'); items.forEach(item => { const itemName = item.textContent.toLowerCase(); if (itemName.includes(searchTerm.toLowerCase())) { item.style.display = 'flex'; } else { item.style.display = 'none'; } }); }</code>
document.addEventListener('DOMContentLoaded', (event) => {
  updateTotal();
});

function CustomerFunc() {
  var x = document.getElementById("ListDiv");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function selectItem(name, price) {
  const selectedItems = JSON.parse(localStorage.getItem('selectedItems')) || {};
  if (selectedItems[name]) {
    selectedItems[name].count++;
  } else {
    selectedItems[name] = {
      price: price,
      count: 1
    };
  }
  localStorage.setItem('selectedItems', JSON.stringify(selectedItems));
  updateTotal();
}

function updateTotal() {
  const selectedItems = JSON.parse(localStorage.getItem('selectedItems')) || {};
  const repairCost = parseInt(document.getElementById('repairCost').value) || 0;
  const totalPriceElement = document.getElementById('totalPrice');
  const selectedItemsElement = document.getElementById('selectedItems');
  const selectedItemsListElement = document.getElementById('selectedItemsList');
  let total = 0;
  selectedItemsElement.innerHTML = '';
  selectedItemsListElement.innerHTML = '';
  for (const [name, info] of Object.entries(selectedItems)) {
    const itemTotal = info.price * info.count;
    total += itemTotal;
    const formattedItemTotal = formatNumberWithCommas(itemTotal);
    const itemElement = document.createElement('p');
    itemElement.innerHTML = `${name} x${info.count} - $${formattedItemTotal}`;
    selectedItemsElement.appendChild(itemElement);

    // Add to the selected items list
    for (let i = 0; i < info.count; i++) {
      const listItemElement = document.createElement('span');
      listItemElement.textContent = `${name}, `;
      //selectedItemsListElement.appendChild(listItemElement);
    }
  }
  total += repairCost;
  const formattedTotal = formatNumberWithCommas(total);
  totalPriceElement.textContent = formattedTotal;
}

function resetTotal() {
  localStorage.removeItem('selectedItems');
  updateTotal();
  resetSummary();
}

function showSummary() {
  const selectedItems = JSON.parse(localStorage.getItem('selectedItems')) || {};

  // Check if there are selected items
  if (Object.keys(selectedItems).length > 0) {
    const summaryElement = document.getElementById('summary');
    let upgradesPurchased = "";

    let resprays = "";
    for (const [name, info] of Object.entries(selectedItems)) {
      if (name.includes("Respray")) {
        resprays += `${name.charAt(0)}/`
      } else {
        upgradesPurchased += `${name}, `;
      }
    }
    //remove last slash
    if (resprays) {
      resprays = resprays.slice(0, -1)
      resprays += " Respray"
      upgradesPurchased += resprays
    } else {
      upgradesPurchased = upgradesPurchased.slice(0, -2);

    }


    const repairCost = parseInt(document.getElementById('repairCost').value) || 0;
    const total = calculateTotal(selectedItems) + repairCost;
    const formattedTotal = formatNumberWithCommas(total);
    const summaryMessage = `<span class="data-label">Customer Name:</span> ${document.getElementById('customerName').value}<br>
                                        <span class="data-label">Vehicle | Make/Model:</span> ${document.getElementById('vehicleMakeModel').value}<br>
                                        <span class="data-label">Plate:</span> ${document.getElementById('plate').value}<br>
                                        <span class="data-label">Upgrades Purchased:</span> ${upgradesPurchased}<br>
                                        <span class="data-label">Price Charged:</span> $${formattedTotal}<br>
                                        <span class="data-label">SHOP:</span> Mirror Park Repairs <br>
                                        <span class="data-label">FTO:</span> ${document.getElementById('fto').value}`;

    summaryElement.innerHTML = summaryMessage;
  } else {
    alert("No upgrades selected. Please select at least one item before showing the summary.");
  }
}

function resetSummary() {
  const summaryElement = document.getElementById('summary');
  summaryElement.innerHTML = '';
}

function resetInfo() {
  document.getElementById('customerName').value = '';
  document.getElementById('vehicleMakeModel').value = '';
  document.getElementById('plate').value = '';
}

function calculateTotal(selectedItems) {
  let total = 0;
  for (const info of Object.values(selectedItems)) {
    total += info.price * info.count;
  }
  return total;
}

function formatNumberWithCommas(number) {
  return number.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
}

function filterItems(searchTerm) {
  const items = document.querySelectorAll('#itemList li');
  items.forEach(item => {
    const itemName = item.textContent.toLowerCase();
    if (itemName.includes(searchTerm.toLowerCase())) {
      item.style.display = 'flex';
    } else {
      item.style.display = 'none';
    }
  });
}
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
padding: 20px;
margin: 0;
}
h1,
h2 {
color: #000000;
/* Change heading color to blue */
}
input[type="text"],
input[type="number"],
select {
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
color: #000000;
/* Change text color of buttons to blue */
background-color: #ffe8f9;
/* Change background color of buttons to yellow */
transition: background 0.3s ease;
}
button:hover {
background-image: linear-gradient(to right, #2575fc 0%, #6a11cb 100%);
}
ul {
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
}
li {
background-color: #ffe8f9;
/* Change background color of items to blue */
color: #000000;
/* Change text color of items to yellow */
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
flex-wrap: wrap;
}
.item-action {
color: #2575fc;
user-select: none;
}
#itemListM,
#itemList,
#selectedItems,
#selectedItemsList,
#summary {
color: #000000;
display: inline-block;
width: auto;
}
#itemList {
max-height: 30vh;
/* 30% of the viewport height */
column-width: 300px;
/* Minimum width of each column, adjust as needed */
column-fill: auto;
/* Ensures columns are filled evenly */
width: 100%;
/* Adjust based on the container's width */
-webkit-column-width: 300px;
/* For Safari and Chrome */
-moz-column-width: 300px;
/* For Firefox */
}
#itemListM {
max-height: 30vh;
/* 30% of the viewport height */
column-width: 300px;
/* Minimum width of each column, adjust as needed */
column-fill: auto;
/* Ensures columns are filled evenly */
width: 100%;
/* Adjust based on the container's width */
-webkit-column-width: 300px;
/* For Safari and Chrome */
-moz-column-width: 300px;
/* For Firefox */
}
.item-action,
#checkB,
#checkM,
#showSummary,
#resetInfo,
#resetTotal {
cursor: pointer;
margin-left: 10px;
font-weight: bold;
color: #000000;
/* Change text color of buttons to yellow */
background-color: #ffe8f9;
/* Change background color of buttons to blue */
border: none;
border-radius: 5px;
padding: 10px 20px;
transition: background 0.3s ease;
}
.item-action:hover,
#showSummary:hover,
#resetInfo:hover,
#resetTotal:hover {
background-color: #2575fc;
/* Change background color of buttons on hover to a lighter shade */
}
/* Additional styles for the selected items */
#selectedItemsList,
#summary {
margin-top: 10px;
color: #000000;
}
/* Change color of data to blue */
.data-label {
color: #000000;
font-weight: bold;
}
/* Styling for the logo */
/* Styling for the logo container */
.logo-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
width: 100%;
/* Ensure the container spans the full width */
}
.logo-container img {
width: 30%;
min-width: 100px;
/* Set a minimum width for the logo */
height: auto;
/* Maintain aspect ratio */
}
#checkBtn {
display: none;
}
#itemList {
display: none;
}
#checkBtn:checked~#itemList {
display: block;
}
#checkBtnM {
display: none;
}
#itemListM {
display: none;
}
#checkBtnM:checked~#itemListM {
display: block;
}</code>
<code>body { font-family: 'Arial', sans-serif; background-color: #f0f0f0; padding: 20px; margin: 0; } h1, h2 { color: #000000; /* Change heading color to blue */ } input[type="text"], input[type="number"], select { padding: 10px; margin-right: 10px; border: 1px solid #ccc; border-radius: 5px; width: 200px; } button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; color: #000000; /* Change text color of buttons to blue */ background-color: #ffe8f9; /* Change background color of buttons to yellow */ transition: background 0.3s ease; } button:hover { background-image: linear-gradient(to right, #2575fc 0%, #6a11cb 100%); } ul { list-style-type: none; padding: 0; display: flex; flex-wrap: wrap; } li { background-color: #ffe8f9; /* Change background color of items to blue */ color: #000000; /* Change text color of items to yellow */ padding: 10px; margin-bottom: 10px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; flex-wrap: wrap; } .item-action { color: #2575fc; user-select: none; } #itemListM, #itemList, #selectedItems, #selectedItemsList, #summary { color: #000000; display: inline-block; width: auto; } #itemList { max-height: 30vh; /* 30% of the viewport height */ column-width: 300px; /* Minimum width of each column, adjust as needed */ column-fill: auto; /* Ensures columns are filled evenly */ width: 100%; /* Adjust based on the container's width */ -webkit-column-width: 300px; /* For Safari and Chrome */ -moz-column-width: 300px; /* For Firefox */ } #itemListM { max-height: 30vh; /* 30% of the viewport height */ column-width: 300px; /* Minimum width of each column, adjust as needed */ column-fill: auto; /* Ensures columns are filled evenly */ width: 100%; /* Adjust based on the container's width */ -webkit-column-width: 300px; /* For Safari and Chrome */ -moz-column-width: 300px; /* For Firefox */ } .item-action, #checkB, #checkM, #showSummary, #resetInfo, #resetTotal { cursor: pointer; margin-left: 10px; font-weight: bold; color: #000000; /* Change text color of buttons to yellow */ background-color: #ffe8f9; /* Change background color of buttons to blue */ border: none; border-radius: 5px; padding: 10px 20px; transition: background 0.3s ease; } .item-action:hover, #showSummary:hover, #resetInfo:hover, #resetTotal:hover { background-color: #2575fc; /* Change background color of buttons on hover to a lighter shade */ } /* Additional styles for the selected items */ #selectedItemsList, #summary { margin-top: 10px; color: #000000; } /* Change color of data to blue */ .data-label { color: #000000; font-weight: bold; } /* Styling for the logo */ /* Styling for the logo container */ .logo-container { display: flex; justify-content: center; margin-bottom: 20px; width: 100%; /* Ensure the container spans the full width */ } .logo-container img { width: 30%; min-width: 100px; /* Set a minimum width for the logo */ height: auto; /* Maintain aspect ratio */ } #checkBtn { display: none; } #itemList { display: none; } #checkBtn:checked~#itemList { display: block; } #checkBtnM { display: none; } #itemListM { display: none; } #checkBtnM:checked~#itemListM { display: block; }</code>
body {
  font-family: 'Arial', sans-serif;
  background-color: #f0f0f0;
  padding: 20px;
  margin: 0;
}

h1,
h2 {
  color: #000000;
  /* Change heading color to blue */
}

input[type="text"],
input[type="number"],
select {
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 200px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  color: #000000;
  /* Change text color of buttons to blue */
  background-color: #ffe8f9;
  /* Change background color of buttons to yellow */
  transition: background 0.3s ease;
}

button:hover {
  background-image: linear-gradient(to right, #2575fc 0%, #6a11cb 100%);
}

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

li {
  background-color: #ffe8f9;
  /* Change background color of items to blue */
  color: #000000;
  /* Change text color of items to yellow */
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  flex-wrap: wrap;
}

.item-action {
  color: #2575fc;
  user-select: none;
}

#itemListM,
#itemList,
#selectedItems,
#selectedItemsList,
#summary {
  color: #000000;
  display: inline-block;
  width: auto;
}

#itemList {
  max-height: 30vh;
  /* 30% of the viewport height */
  column-width: 300px;
  /* Minimum width of each column, adjust as needed */
  column-fill: auto;
  /* Ensures columns are filled evenly */
  width: 100%;
  /* Adjust based on the container's width */
  -webkit-column-width: 300px;
  /* For Safari and Chrome */
  -moz-column-width: 300px;
  /* For Firefox */
}

#itemListM {
  max-height: 30vh;
  /* 30% of the viewport height */
  column-width: 300px;
  /* Minimum width of each column, adjust as needed */
  column-fill: auto;
  /* Ensures columns are filled evenly */
  width: 100%;
  /* Adjust based on the container's width */
  -webkit-column-width: 300px;
  /* For Safari and Chrome */
  -moz-column-width: 300px;
  /* For Firefox */
}

.item-action,
#checkB,
#checkM,
#showSummary,
#resetInfo,
#resetTotal {
  cursor: pointer;
  margin-left: 10px;
  font-weight: bold;
  color: #000000;
  /* Change text color of buttons to yellow */
  background-color: #ffe8f9;
  /* Change background color of buttons to blue */
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  transition: background 0.3s ease;
}

.item-action:hover,
#showSummary:hover,
#resetInfo:hover,
#resetTotal:hover {
  background-color: #2575fc;
  /* Change background color of buttons on hover to a lighter shade */
}


/* Additional styles for the selected items */

#selectedItemsList,
#summary {
  margin-top: 10px;
  color: #000000;
}


/* Change color of data to blue */

.data-label {
  color: #000000;
  font-weight: bold;
}


/* Styling for the logo */


/* Styling for the logo container */

.logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  width: 100%;
  /* Ensure the container spans the full width */
}

.logo-container img {
  width: 30%;
  min-width: 100px;
  /* Set a minimum width for the logo */
  height: auto;
  /* Maintain aspect ratio */
}

#checkBtn {
  display: none;
}

#itemList {
  display: none;
}

#checkBtn:checked~#itemList {
  display: block;
}

#checkBtnM {
  display: none;
}

#itemListM {
  display: none;
}

#checkBtnM:checked~#itemListM {
  display: block;
}
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code><!-- Logo container -->
<div class="logo-container">
<img src="https://discord.cloud/i/u6tyxh3mj" alt="Mirror Park Repair">
</div>
<label for="customerName" class="data-label">Customer Name:</label>
<input type="text" id="customerName">
<label for="vehicleMakeModel" class="data-label">Vehicle | Make/Model:</label>
<input type="text" id="vehicleMakeModel">
<label for="plate" class="data-label">Plate:</label>
<input type="text" id="plate">
<label for="fto" class="data-label">FTO Name:</label>
<input type="text" id="fto">
<br>
<label for="checkBtn" id="checkB">
Customer Pricing
</label>
<label for="checkBtnM" id="checkM">
Mechanic Pricing
</label>
<!-- Search input -->
<label for="search" class="data-label">Search:</label>
<input type="text" id="search" oninput="filterItems(this.value)">
<br>
<!-- List of car upgrades -->
<input type="checkbox" id="checkBtn">
<ul id="itemList">
<!-- Updated item information with the same visuals -->
<li onclick="selectItem('Arch Cover', 500)">Arch Cover - $500</li>
<li onclick="selectItem('Aerial', 500)">Aerial - $500</li>
<li onclick="selectItem('Armor 2', 4250)">Armor 2 - $4250</li>
<li onclick="selectItem('Armor 3', 6500)">Armor 3 - $6500</li>
<li onclick="selectItem('Armor 4', 10450)">Armor 4 - $10450</li>
<li onclick="selectItem('Armor 5', 14250)">Armor 5 - $14250</li>
<li onclick="selectItem('Armor 6', 19500)">Armor 6 - $19500</li>
<li onclick="selectItem('Brakes 2', 4250)">Brakes 2 - $4250</li>
<li onclick="selectItem('Brakes 3', 6500)">Brakes 3 - $6500</li>
<li onclick="selectItem('Brakes 4', 10450)">Brakes 4 - $10450</li>
<li onclick="selectItem('Custom Tires', 700)">Custom Tires - $700</li>
<li onclick="selectItem('Dashboard Color', 1100)">Dashboard - $500</li>
<li onclick="selectItem('Dashboard Color', 1100)">Dashboard Color - $1100</li>
<li onclick="selectItem('Dial', 500)">Dial - $500</li>
<li onclick="selectItem('Engine 2', 4250)">Engine 2 - $4250</li>
<li onclick="selectItem('Engine 3', 6500)">Engine 3 - $6500</li>
<li onclick="selectItem('Engine 4', 10450)">Engine 4 - $10450</li>
<li onclick="selectItem('Engine 5', 14250)">Engine 5 - $14250</li>
<li onclick="selectItem('Engine Block', 500)">Engine Block - $500</li>
<li onclick="selectItem('Exhaust', 500)">Exhaust - $500</li>
<li onclick="selectItem('Fuel Tank', 500)">Fuel Tank - $500</li>
<li onclick="selectItem('Front Bumper', 500)">Front Bumper - $500</li>
<li onclick="selectItem('Grille', 500)">Grille - $500</li>
<li onclick="selectItem('Hood', 500)">Hood - $500</li>
<li onclick="selectItem('Interior Respray', 1100)">Interior Respray - $1100</li>
<li onclick="selectItem('Left Fender', 500)">Left Fender - $500</li>
<li onclick="selectItem('Livery', 500)">Livery - $500</li>
<li onclick="selectItem('Ornaments', 500)">Ornaments - $500</li>
<li onclick="selectItem('Old Livery', 200)">Old Livery - $200</li>
<li onclick="selectItem('P Respray', 1100)">P Respray - $1100</li>
<li onclick="selectItem('Pearlescent', 1100)">Pearlescent - $1100</li>
<li onclick="selectItem('Plate Index', 1100)">Plate Index - $1100</li>
<li onclick="selectItem('Rear Bumper', 500)">Rear Bumper - $500</li>
<li onclick="selectItem('Rim Color', 1100)">Rim Color - $1100</li>
<li onclick="selectItem('Right Fender', 500)">Right Fender - $500</li>
<li onclick="selectItem('Rims', 500)">Rims - $500</li>
<li onclick="selectItem('Roof', 500)">Roof - $500</li>
<li onclick="selectItem('Roll Cage', 500)">Roll Cage - $500</li>
<li onclick="selectItem('Seats', 500)">Seats - $500</li>
<li onclick="selectItem('Side Skirt', 500)">Side Skirt - $500</li>
<li onclick="selectItem('S Respray', 1100)">S Respray - $1100</li>
<li onclick="selectItem('Spoiler', 500)">Spoiler - $500</li>
<li onclick="selectItem('Steering Wheel', 500)">Steering Wheel - $500</li>
<li onclick="selectItem('Strut', 500)">Strut - $500</li>
<li onclick="selectItem('Speaker', 500)">Speaker - $500</li>
<li onclick="selectItem('Suspension 2', 4250)">Suspension 2 - $4250</li>
<li onclick="selectItem('Suspension 3', 6500)">Suspension 3 - $6500</li>
<li onclick="selectItem('Suspension 4', 10450)">Suspension 4 - $10450</li>
<li onclick="selectItem('Suspension 5', 14250)">Suspension 5 - $14250</li>
<li onclick="selectItem('Tint', 500)">Tint - $500</li>
<li onclick="selectItem('Trunk', 500)">Trunk - $500</li>
<li onclick="selectItem('Trim A', 500)">Trim A - $500</li>
<li onclick="selectItem('Trim B', 500)">Trim B - $500</li>
<li onclick="selectItem('Transmission 2', 4250)">Transmission 2 - $4250</li>
<li onclick="selectItem('Transmission 3', 6500)">Transmission 3 - $6500</li>
<li onclick="selectItem('Transmission 4', 10450)">Transmission 4 - $10450</li>
<li onclick="selectItem('Turbo', 11000)">Turbo - $11000</li>
<li onclick="selectItem('Tire Smoke', 500)">Tire Smoke - $500</li>
</ul>
<input type="checkbox" id="checkBtnM">
<ul id="itemListM">
<!-- Updated item information with the same visuals -->
<li onclick="selectItem(' Arch Cover', 400)">Arch Cover - $400</li>
<li onclick="selectItem(' Aerial', 400)">Aerial - $400</li>
<li onclick="selectItem(' Armor 2', 3250)">Armor 2 - $3250</li>
<li onclick="selectItem(' Armor 3', 5500)">Armor 3 - $5500</li>
<li onclick="selectItem(' Armor 4', 9450)">Armor 4 - $9450</li>
<li onclick="selectItem(' Armor 5', 13250)">Armor 5 - $13250</li>
<li onclick="selectItem(' Armor 6', 18500)">Armor 6 - $18500</li>
<li onclick="selectItem(' Brakes 2', 3250)">Brakes 2 - $3250</li>
<li onclick="selectItem(' Brakes 3', 5500)">Brakes 3 - $5500</li>
<li onclick="selectItem(' Brakes 4', 9450)">Brakes 4 - $9450</li>
<li onclick="selectItem(' Custom Tires', 600)">Custom Tires - $600</li>
<li onclick="selectItem(' Dashboard Color', 1000)">Dashboard - $400</li>
<li onclick="selectItem(' Dashboard Color', 1000)">Dashboard Color - $1000</li>
<li onclick="selectItem(' Dial', 400)">Dial - $400</li>
<li onclick="selectItem(' Engine 2', 3250)">Engine 2 - $3250</li>
<li onclick="selectItem(' Engine 3', 5500)">Engine 3 - $5500</li>
<li onclick="selectItem(' Engine 4', 9450)">Engine 4 - $9450</li>
<li onclick="selectItem(' Engine 5', 13250)">Engine 5 - $13250</li>
<li onclick="selectItem(' Engine Block', 400)">Engine Block - $400</li>
<li onclick="selectItem(' Exhaust', 400)">Exhaust - $400</li>
<li onclick="selectItem(' Fuel Tank', 400)">Fuel Tank - $400</li>
<li onclick="selectItem(' Front Bumper', 400)">Front Bumper - $400</li>
<li onclick="selectItem(' Grille', 400)">Grille - $400</li>
<li onclick="selectItem(' Hood', 400)">Hood - $400</li>
<li onclick="selectItem(' Interior Respray', 1000)">Interior Respray - $1000</li>
<li onclick="selectItem(' Left Fender', 400)">Left Fender - $400</li>
<li onclick="selectItem(' Livery', 400)">Livery - $400</li>
<li onclick="selectItem(' Ornaments', 400)">Ornaments - $400</li>
<li onclick="selectItem(' Old Livery', 100)">Old Livery - $100</li>
<li onclick="selectItem(' P Respray', 1000)">P Respray - $1000</li>
<li onclick="selectItem(' Pearlescent', 1000)">Pearlescent - $1000</li>
<li onclick="selectItem(' Plate Index', 1000)">Plate Index - $1000</li>
<li onclick="selectItem(' Rear Bumper', 400)">Rear Bumper - $400</li>
<li onclick="selectItem(' Rim Color', 1000)">Rim Color - $1000</li>
<li onclick="selectItem(' Right Fender', 400)">Right Fender - $400</li>
<li onclick="selectItem(' Rims', 400)">Rims - $400</li>
<li onclick="selectItem(' Roof', 400)">Roof - $400</li>
<li onclick="selectItem(' Roll Cage', 400)">Roll Cage - $400</li>
<li onclick="selectItem(' Seats', 400)">Seats - $400</li>
<li onclick="selectItem(' Side Skirt', 400)">Side Skirt - $400</li>
<li onclick="selectItem(' S Respray', 1000)">S Respray - $1000</li>
<li onclick="selectItem(' Spoiler', 400)">Spoiler - $400</li>
<li onclick="selectItem(' Steering Wheel', 400)">Steering Wheel - $400</li>
<li onclick="selectItem(' Strut', 400)">Strut - $400</li>
<li onclick="selectItem(' Speaker', 400)">Speaker - $400</li>
<li onclick="selectItem(' Suspension 2', 3250)">Suspension 2 - $3250</li>
<li onclick="selectItem(' Suspension 3', 5500)">Suspension 3 - $5500</li>
<li onclick="selectItem(' Suspension 4', 9450)">Suspension 4 - $9450</li>
<li onclick="selectItem(' Suspension 5', 13250)">Suspension 5 - $13250</li>
<li onclick="selectItem(' Tint', 400)">Tint - $400</li>
<li onclick="selectItem(' Trunk', 400)">Trunk - $400</li>
<li onclick="selectItem(' Trim A', 400)">Trim A - $400</li>
<li onclick="selectItem(' Trim B', 400)">Trim B - $400</li>
<li onclick="selectItem(' Transmission 2', 3250)">Transmission 2 - $3250</li>
<li onclick="selectItem(' Transmission 3', 5500)">Transmission 3 - $5500</li>
<li onclick="selectItem(' Transmission 4', 9450)">Transmission 4 - $9450</li>
<li onclick="selectItem(' Turbo', 10000)">Turbo - $10000</li>
<li onclick="selectItem(' Tire Smoke', 400)">Tire Smoke - $400</li>
</ul>
<!-- Total price display -->
<h2>Total: $<span id="totalPrice">0</span></h2>
<!-- Selected items display -->
<div id="selectedItems"></div>
<div id="selectedItemsList"></div>
<br>
<!-- Repair Cost input -->
<div>
<label for="repairCost" class="data-label">Repair Cost:</label>
<input type="number" id="repairCost" onchange="updateTotal()">
</div>
<!-- Buttons for actions -->
<button id="showSummary" onclick="showSummary()">Show Summary</button>
<button id="resetInfo" onclick="resetInfo()">Reset Info</button>
<button id="resetTotal" onclick="resetTotal()">Reset Total</button>
<!-- Summary section -->
<div id="summary"></div></code>
<code><!-- Logo container --> <div class="logo-container"> <img src="https://discord.cloud/i/u6tyxh3mj" alt="Mirror Park Repair"> </div> <label for="customerName" class="data-label">Customer Name:</label> <input type="text" id="customerName"> <label for="vehicleMakeModel" class="data-label">Vehicle | Make/Model:</label> <input type="text" id="vehicleMakeModel"> <label for="plate" class="data-label">Plate:</label> <input type="text" id="plate"> <label for="fto" class="data-label">FTO Name:</label> <input type="text" id="fto"> <br> <label for="checkBtn" id="checkB"> Customer Pricing </label> <label for="checkBtnM" id="checkM"> Mechanic Pricing </label> <!-- Search input --> <label for="search" class="data-label">Search:</label> <input type="text" id="search" oninput="filterItems(this.value)"> <br> <!-- List of car upgrades --> <input type="checkbox" id="checkBtn"> <ul id="itemList"> <!-- Updated item information with the same visuals --> <li onclick="selectItem('Arch Cover', 500)">Arch Cover - $500</li> <li onclick="selectItem('Aerial', 500)">Aerial - $500</li> <li onclick="selectItem('Armor 2', 4250)">Armor 2 - $4250</li> <li onclick="selectItem('Armor 3', 6500)">Armor 3 - $6500</li> <li onclick="selectItem('Armor 4', 10450)">Armor 4 - $10450</li> <li onclick="selectItem('Armor 5', 14250)">Armor 5 - $14250</li> <li onclick="selectItem('Armor 6', 19500)">Armor 6 - $19500</li> <li onclick="selectItem('Brakes 2', 4250)">Brakes 2 - $4250</li> <li onclick="selectItem('Brakes 3', 6500)">Brakes 3 - $6500</li> <li onclick="selectItem('Brakes 4', 10450)">Brakes 4 - $10450</li> <li onclick="selectItem('Custom Tires', 700)">Custom Tires - $700</li> <li onclick="selectItem('Dashboard Color', 1100)">Dashboard - $500</li> <li onclick="selectItem('Dashboard Color', 1100)">Dashboard Color - $1100</li> <li onclick="selectItem('Dial', 500)">Dial - $500</li> <li onclick="selectItem('Engine 2', 4250)">Engine 2 - $4250</li> <li onclick="selectItem('Engine 3', 6500)">Engine 3 - $6500</li> <li onclick="selectItem('Engine 4', 10450)">Engine 4 - $10450</li> <li onclick="selectItem('Engine 5', 14250)">Engine 5 - $14250</li> <li onclick="selectItem('Engine Block', 500)">Engine Block - $500</li> <li onclick="selectItem('Exhaust', 500)">Exhaust - $500</li> <li onclick="selectItem('Fuel Tank', 500)">Fuel Tank - $500</li> <li onclick="selectItem('Front Bumper', 500)">Front Bumper - $500</li> <li onclick="selectItem('Grille', 500)">Grille - $500</li> <li onclick="selectItem('Hood', 500)">Hood - $500</li> <li onclick="selectItem('Interior Respray', 1100)">Interior Respray - $1100</li> <li onclick="selectItem('Left Fender', 500)">Left Fender - $500</li> <li onclick="selectItem('Livery', 500)">Livery - $500</li> <li onclick="selectItem('Ornaments', 500)">Ornaments - $500</li> <li onclick="selectItem('Old Livery', 200)">Old Livery - $200</li> <li onclick="selectItem('P Respray', 1100)">P Respray - $1100</li> <li onclick="selectItem('Pearlescent', 1100)">Pearlescent - $1100</li> <li onclick="selectItem('Plate Index', 1100)">Plate Index - $1100</li> <li onclick="selectItem('Rear Bumper', 500)">Rear Bumper - $500</li> <li onclick="selectItem('Rim Color', 1100)">Rim Color - $1100</li> <li onclick="selectItem('Right Fender', 500)">Right Fender - $500</li> <li onclick="selectItem('Rims', 500)">Rims - $500</li> <li onclick="selectItem('Roof', 500)">Roof - $500</li> <li onclick="selectItem('Roll Cage', 500)">Roll Cage - $500</li> <li onclick="selectItem('Seats', 500)">Seats - $500</li> <li onclick="selectItem('Side Skirt', 500)">Side Skirt - $500</li> <li onclick="selectItem('S Respray', 1100)">S Respray - $1100</li> <li onclick="selectItem('Spoiler', 500)">Spoiler - $500</li> <li onclick="selectItem('Steering Wheel', 500)">Steering Wheel - $500</li> <li onclick="selectItem('Strut', 500)">Strut - $500</li> <li onclick="selectItem('Speaker', 500)">Speaker - $500</li> <li onclick="selectItem('Suspension 2', 4250)">Suspension 2 - $4250</li> <li onclick="selectItem('Suspension 3', 6500)">Suspension 3 - $6500</li> <li onclick="selectItem('Suspension 4', 10450)">Suspension 4 - $10450</li> <li onclick="selectItem('Suspension 5', 14250)">Suspension 5 - $14250</li> <li onclick="selectItem('Tint', 500)">Tint - $500</li> <li onclick="selectItem('Trunk', 500)">Trunk - $500</li> <li onclick="selectItem('Trim A', 500)">Trim A - $500</li> <li onclick="selectItem('Trim B', 500)">Trim B - $500</li> <li onclick="selectItem('Transmission 2', 4250)">Transmission 2 - $4250</li> <li onclick="selectItem('Transmission 3', 6500)">Transmission 3 - $6500</li> <li onclick="selectItem('Transmission 4', 10450)">Transmission 4 - $10450</li> <li onclick="selectItem('Turbo', 11000)">Turbo - $11000</li> <li onclick="selectItem('Tire Smoke', 500)">Tire Smoke - $500</li> </ul> <input type="checkbox" id="checkBtnM"> <ul id="itemListM"> <!-- Updated item information with the same visuals --> <li onclick="selectItem(' Arch Cover', 400)">Arch Cover - $400</li> <li onclick="selectItem(' Aerial', 400)">Aerial - $400</li> <li onclick="selectItem(' Armor 2', 3250)">Armor 2 - $3250</li> <li onclick="selectItem(' Armor 3', 5500)">Armor 3 - $5500</li> <li onclick="selectItem(' Armor 4', 9450)">Armor 4 - $9450</li> <li onclick="selectItem(' Armor 5', 13250)">Armor 5 - $13250</li> <li onclick="selectItem(' Armor 6', 18500)">Armor 6 - $18500</li> <li onclick="selectItem(' Brakes 2', 3250)">Brakes 2 - $3250</li> <li onclick="selectItem(' Brakes 3', 5500)">Brakes 3 - $5500</li> <li onclick="selectItem(' Brakes 4', 9450)">Brakes 4 - $9450</li> <li onclick="selectItem(' Custom Tires', 600)">Custom Tires - $600</li> <li onclick="selectItem(' Dashboard Color', 1000)">Dashboard - $400</li> <li onclick="selectItem(' Dashboard Color', 1000)">Dashboard Color - $1000</li> <li onclick="selectItem(' Dial', 400)">Dial - $400</li> <li onclick="selectItem(' Engine 2', 3250)">Engine 2 - $3250</li> <li onclick="selectItem(' Engine 3', 5500)">Engine 3 - $5500</li> <li onclick="selectItem(' Engine 4', 9450)">Engine 4 - $9450</li> <li onclick="selectItem(' Engine 5', 13250)">Engine 5 - $13250</li> <li onclick="selectItem(' Engine Block', 400)">Engine Block - $400</li> <li onclick="selectItem(' Exhaust', 400)">Exhaust - $400</li> <li onclick="selectItem(' Fuel Tank', 400)">Fuel Tank - $400</li> <li onclick="selectItem(' Front Bumper', 400)">Front Bumper - $400</li> <li onclick="selectItem(' Grille', 400)">Grille - $400</li> <li onclick="selectItem(' Hood', 400)">Hood - $400</li> <li onclick="selectItem(' Interior Respray', 1000)">Interior Respray - $1000</li> <li onclick="selectItem(' Left Fender', 400)">Left Fender - $400</li> <li onclick="selectItem(' Livery', 400)">Livery - $400</li> <li onclick="selectItem(' Ornaments', 400)">Ornaments - $400</li> <li onclick="selectItem(' Old Livery', 100)">Old Livery - $100</li> <li onclick="selectItem(' P Respray', 1000)">P Respray - $1000</li> <li onclick="selectItem(' Pearlescent', 1000)">Pearlescent - $1000</li> <li onclick="selectItem(' Plate Index', 1000)">Plate Index - $1000</li> <li onclick="selectItem(' Rear Bumper', 400)">Rear Bumper - $400</li> <li onclick="selectItem(' Rim Color', 1000)">Rim Color - $1000</li> <li onclick="selectItem(' Right Fender', 400)">Right Fender - $400</li> <li onclick="selectItem(' Rims', 400)">Rims - $400</li> <li onclick="selectItem(' Roof', 400)">Roof - $400</li> <li onclick="selectItem(' Roll Cage', 400)">Roll Cage - $400</li> <li onclick="selectItem(' Seats', 400)">Seats - $400</li> <li onclick="selectItem(' Side Skirt', 400)">Side Skirt - $400</li> <li onclick="selectItem(' S Respray', 1000)">S Respray - $1000</li> <li onclick="selectItem(' Spoiler', 400)">Spoiler - $400</li> <li onclick="selectItem(' Steering Wheel', 400)">Steering Wheel - $400</li> <li onclick="selectItem(' Strut', 400)">Strut - $400</li> <li onclick="selectItem(' Speaker', 400)">Speaker - $400</li> <li onclick="selectItem(' Suspension 2', 3250)">Suspension 2 - $3250</li> <li onclick="selectItem(' Suspension 3', 5500)">Suspension 3 - $5500</li> <li onclick="selectItem(' Suspension 4', 9450)">Suspension 4 - $9450</li> <li onclick="selectItem(' Suspension 5', 13250)">Suspension 5 - $13250</li> <li onclick="selectItem(' Tint', 400)">Tint - $400</li> <li onclick="selectItem(' Trunk', 400)">Trunk - $400</li> <li onclick="selectItem(' Trim A', 400)">Trim A - $400</li> <li onclick="selectItem(' Trim B', 400)">Trim B - $400</li> <li onclick="selectItem(' Transmission 2', 3250)">Transmission 2 - $3250</li> <li onclick="selectItem(' Transmission 3', 5500)">Transmission 3 - $5500</li> <li onclick="selectItem(' Transmission 4', 9450)">Transmission 4 - $9450</li> <li onclick="selectItem(' Turbo', 10000)">Turbo - $10000</li> <li onclick="selectItem(' Tire Smoke', 400)">Tire Smoke - $400</li> </ul> <!-- Total price display --> <h2>Total: $<span id="totalPrice">0</span></h2> <!-- Selected items display --> <div id="selectedItems"></div> <div id="selectedItemsList"></div> <br> <!-- Repair Cost input --> <div> <label for="repairCost" class="data-label">Repair Cost:</label> <input type="number" id="repairCost" onchange="updateTotal()"> </div> <!-- Buttons for actions --> <button id="showSummary" onclick="showSummary()">Show Summary</button> <button id="resetInfo" onclick="resetInfo()">Reset Info</button> <button id="resetTotal" onclick="resetTotal()">Reset Total</button> <!-- Summary section --> <div id="summary"></div></code>
<!-- Logo container -->
<div class="logo-container">
  <img src="https://discord.cloud/i/u6tyxh3mj" alt="Mirror Park Repair">
</div>

<label for="customerName" class="data-label">Customer Name:</label>
<input type="text" id="customerName">

<label for="vehicleMakeModel" class="data-label">Vehicle | Make/Model:</label>
<input type="text" id="vehicleMakeModel">

<label for="plate" class="data-label">Plate:</label>
<input type="text" id="plate">

<label for="fto" class="data-label">FTO Name:</label>
<input type="text" id="fto">
<br>

<label for="checkBtn" id="checkB">
        Customer Pricing
    </label>

<label for="checkBtnM" id="checkM">
        Mechanic Pricing
    </label>

<!-- Search input -->
<label for="search" class="data-label">Search:</label>
<input type="text" id="search" oninput="filterItems(this.value)">
<br>

<!-- List of car upgrades -->
<input type="checkbox" id="checkBtn">
<ul id="itemList">
  <!-- Updated item information with the same visuals -->
  <li onclick="selectItem('Arch Cover', 500)">Arch Cover - $500</li>
  <li onclick="selectItem('Aerial', 500)">Aerial - $500</li>
  <li onclick="selectItem('Armor 2', 4250)">Armor 2 - $4250</li>
  <li onclick="selectItem('Armor 3', 6500)">Armor 3 - $6500</li>
  <li onclick="selectItem('Armor 4', 10450)">Armor 4 - $10450</li>
  <li onclick="selectItem('Armor 5', 14250)">Armor 5 - $14250</li>
  <li onclick="selectItem('Armor 6', 19500)">Armor 6 - $19500</li>
  <li onclick="selectItem('Brakes 2', 4250)">Brakes 2 - $4250</li>
  <li onclick="selectItem('Brakes 3', 6500)">Brakes 3 - $6500</li>
  <li onclick="selectItem('Brakes 4', 10450)">Brakes 4 - $10450</li>
  <li onclick="selectItem('Custom Tires', 700)">Custom Tires - $700</li>
  <li onclick="selectItem('Dashboard Color', 1100)">Dashboard - $500</li>
  <li onclick="selectItem('Dashboard Color', 1100)">Dashboard Color - $1100</li>
  <li onclick="selectItem('Dial', 500)">Dial - $500</li>
  <li onclick="selectItem('Engine 2', 4250)">Engine 2 - $4250</li>
  <li onclick="selectItem('Engine 3', 6500)">Engine 3 - $6500</li>
  <li onclick="selectItem('Engine 4', 10450)">Engine 4 - $10450</li>
  <li onclick="selectItem('Engine 5', 14250)">Engine 5 - $14250</li>
  <li onclick="selectItem('Engine Block', 500)">Engine Block - $500</li>
  <li onclick="selectItem('Exhaust', 500)">Exhaust - $500</li>
  <li onclick="selectItem('Fuel Tank', 500)">Fuel Tank - $500</li>
  <li onclick="selectItem('Front Bumper', 500)">Front Bumper - $500</li>
  <li onclick="selectItem('Grille', 500)">Grille - $500</li>
  <li onclick="selectItem('Hood', 500)">Hood - $500</li>
  <li onclick="selectItem('Interior Respray', 1100)">Interior Respray - $1100</li>
  <li onclick="selectItem('Left Fender', 500)">Left Fender - $500</li>
  <li onclick="selectItem('Livery', 500)">Livery - $500</li>
  <li onclick="selectItem('Ornaments', 500)">Ornaments - $500</li>
  <li onclick="selectItem('Old Livery', 200)">Old Livery - $200</li>
  <li onclick="selectItem('P Respray', 1100)">P Respray - $1100</li>
  <li onclick="selectItem('Pearlescent', 1100)">Pearlescent - $1100</li>
  <li onclick="selectItem('Plate Index', 1100)">Plate Index - $1100</li>
  <li onclick="selectItem('Rear Bumper', 500)">Rear Bumper - $500</li>
  <li onclick="selectItem('Rim Color', 1100)">Rim Color - $1100</li>
  <li onclick="selectItem('Right Fender', 500)">Right Fender - $500</li>
  <li onclick="selectItem('Rims', 500)">Rims - $500</li>
  <li onclick="selectItem('Roof', 500)">Roof - $500</li>
  <li onclick="selectItem('Roll Cage', 500)">Roll Cage - $500</li>
  <li onclick="selectItem('Seats', 500)">Seats - $500</li>
  <li onclick="selectItem('Side Skirt', 500)">Side Skirt - $500</li>
  <li onclick="selectItem('S Respray', 1100)">S Respray - $1100</li>
  <li onclick="selectItem('Spoiler', 500)">Spoiler - $500</li>
  <li onclick="selectItem('Steering Wheel', 500)">Steering Wheel - $500</li>
  <li onclick="selectItem('Strut', 500)">Strut - $500</li>
  <li onclick="selectItem('Speaker', 500)">Speaker - $500</li>
  <li onclick="selectItem('Suspension 2', 4250)">Suspension 2 - $4250</li>
  <li onclick="selectItem('Suspension 3', 6500)">Suspension 3 - $6500</li>
  <li onclick="selectItem('Suspension 4', 10450)">Suspension 4 - $10450</li>
  <li onclick="selectItem('Suspension 5', 14250)">Suspension 5 - $14250</li>
  <li onclick="selectItem('Tint', 500)">Tint - $500</li>
  <li onclick="selectItem('Trunk', 500)">Trunk - $500</li>
  <li onclick="selectItem('Trim A', 500)">Trim A - $500</li>
  <li onclick="selectItem('Trim B', 500)">Trim B - $500</li>
  <li onclick="selectItem('Transmission 2', 4250)">Transmission 2 - $4250</li>
  <li onclick="selectItem('Transmission 3', 6500)">Transmission 3 - $6500</li>
  <li onclick="selectItem('Transmission 4', 10450)">Transmission 4 - $10450</li>
  <li onclick="selectItem('Turbo', 11000)">Turbo - $11000</li>
  <li onclick="selectItem('Tire Smoke', 500)">Tire Smoke - $500</li>
</ul>

<input type="checkbox" id="checkBtnM">
<ul id="itemListM">
  <!-- Updated item information with the same visuals -->
  <li onclick="selectItem(' Arch Cover', 400)">Arch Cover - $400</li>
  <li onclick="selectItem(' Aerial', 400)">Aerial - $400</li>
  <li onclick="selectItem(' Armor 2', 3250)">Armor 2 - $3250</li>
  <li onclick="selectItem(' Armor 3', 5500)">Armor 3 - $5500</li>
  <li onclick="selectItem(' Armor 4', 9450)">Armor 4 - $9450</li>
  <li onclick="selectItem(' Armor 5', 13250)">Armor 5 - $13250</li>
  <li onclick="selectItem(' Armor 6', 18500)">Armor 6 - $18500</li>
  <li onclick="selectItem(' Brakes 2', 3250)">Brakes 2 - $3250</li>
  <li onclick="selectItem(' Brakes 3', 5500)">Brakes 3 - $5500</li>
  <li onclick="selectItem(' Brakes 4', 9450)">Brakes 4 - $9450</li>
  <li onclick="selectItem(' Custom Tires', 600)">Custom Tires - $600</li>
  <li onclick="selectItem(' Dashboard Color', 1000)">Dashboard - $400</li>
  <li onclick="selectItem(' Dashboard Color', 1000)">Dashboard Color - $1000</li>
  <li onclick="selectItem(' Dial', 400)">Dial - $400</li>
  <li onclick="selectItem(' Engine 2', 3250)">Engine 2 - $3250</li>
  <li onclick="selectItem(' Engine 3', 5500)">Engine 3 - $5500</li>
  <li onclick="selectItem(' Engine 4', 9450)">Engine 4 - $9450</li>
  <li onclick="selectItem(' Engine 5', 13250)">Engine 5 - $13250</li>
  <li onclick="selectItem(' Engine Block', 400)">Engine Block - $400</li>
  <li onclick="selectItem(' Exhaust', 400)">Exhaust - $400</li>
  <li onclick="selectItem(' Fuel Tank', 400)">Fuel Tank - $400</li>
  <li onclick="selectItem(' Front Bumper', 400)">Front Bumper - $400</li>
  <li onclick="selectItem(' Grille', 400)">Grille - $400</li>
  <li onclick="selectItem(' Hood', 400)">Hood - $400</li>
  <li onclick="selectItem(' Interior Respray', 1000)">Interior Respray - $1000</li>
  <li onclick="selectItem(' Left Fender', 400)">Left Fender - $400</li>
  <li onclick="selectItem(' Livery', 400)">Livery - $400</li>
  <li onclick="selectItem(' Ornaments', 400)">Ornaments - $400</li>
  <li onclick="selectItem(' Old Livery', 100)">Old Livery - $100</li>
  <li onclick="selectItem(' P Respray', 1000)">P Respray - $1000</li>
  <li onclick="selectItem(' Pearlescent', 1000)">Pearlescent - $1000</li>
  <li onclick="selectItem(' Plate Index', 1000)">Plate Index - $1000</li>
  <li onclick="selectItem(' Rear Bumper', 400)">Rear Bumper - $400</li>
  <li onclick="selectItem(' Rim Color', 1000)">Rim Color - $1000</li>
  <li onclick="selectItem(' Right Fender', 400)">Right Fender - $400</li>
  <li onclick="selectItem(' Rims', 400)">Rims - $400</li>
  <li onclick="selectItem(' Roof', 400)">Roof - $400</li>
  <li onclick="selectItem(' Roll Cage', 400)">Roll Cage - $400</li>
  <li onclick="selectItem(' Seats', 400)">Seats - $400</li>
  <li onclick="selectItem(' Side Skirt', 400)">Side Skirt - $400</li>
  <li onclick="selectItem(' S Respray', 1000)">S Respray - $1000</li>
  <li onclick="selectItem(' Spoiler', 400)">Spoiler - $400</li>
  <li onclick="selectItem(' Steering Wheel', 400)">Steering Wheel - $400</li>
  <li onclick="selectItem(' Strut', 400)">Strut - $400</li>
  <li onclick="selectItem(' Speaker', 400)">Speaker - $400</li>
  <li onclick="selectItem(' Suspension 2', 3250)">Suspension 2 - $3250</li>
  <li onclick="selectItem(' Suspension 3', 5500)">Suspension 3 - $5500</li>
  <li onclick="selectItem(' Suspension 4', 9450)">Suspension 4 - $9450</li>
  <li onclick="selectItem(' Suspension 5', 13250)">Suspension 5 - $13250</li>
  <li onclick="selectItem(' Tint', 400)">Tint - $400</li>
  <li onclick="selectItem(' Trunk', 400)">Trunk - $400</li>
  <li onclick="selectItem(' Trim A', 400)">Trim A - $400</li>
  <li onclick="selectItem(' Trim B', 400)">Trim B - $400</li>
  <li onclick="selectItem(' Transmission 2', 3250)">Transmission 2 - $3250</li>
  <li onclick="selectItem(' Transmission 3', 5500)">Transmission 3 - $5500</li>
  <li onclick="selectItem(' Transmission 4', 9450)">Transmission 4 - $9450</li>
  <li onclick="selectItem(' Turbo', 10000)">Turbo - $10000</li>
  <li onclick="selectItem(' Tire Smoke', 400)">Tire Smoke - $400</li>
</ul>

<!-- Total price display -->
<h2>Total: $<span id="totalPrice">0</span></h2>

<!-- Selected items display -->
<div id="selectedItems"></div>
<div id="selectedItemsList"></div>
<br>

<!-- Repair Cost input -->
<div>
  <label for="repairCost" class="data-label">Repair Cost:</label>
  <input type="number" id="repairCost" onchange="updateTotal()">
</div>

<!-- Buttons for actions -->
<button id="showSummary" onclick="showSummary()">Show Summary</button>
<button id="resetInfo" onclick="resetInfo()">Reset Info</button>
<button id="resetTotal" onclick="resetTotal()">Reset Total</button>

<!-- Summary section -->
<div id="summary"></div>
  • javascript
  • html
  • css

3

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa Dịch vụ tổ chức sự kiện 5 sao Thông tin về chúng tôi Dịch vụ sinh nhật bé trai Dịch vụ sinh nhật bé gái Sự kiện trọn gói Các tiết mục giải trí Dịch vụ bổ trợ Tiệc cưới sang trọng Dịch vụ khai trương Tư vấn tổ chức sự kiện Hình ảnh sự kiện Cập nhật tin tức Liên hệ ngay Thuê chú hề chuyên nghiệp Tiệc tất niên cho công ty Trang trí tiệc cuối năm Tiệc tất niên độc đáo Sinh nhật bé Hải Đăng Sinh nhật đáng yêu bé Khánh Vân Sinh nhật sang trọng Bích Ngân Tiệc sinh nhật bé Thanh Trang Dịch vụ ông già Noel Xiếc thú vui nhộn Biểu diễn xiếc quay đĩa Dịch vụ tổ chức tiệc uy tín Khám phá dịch vụ của chúng tôi Tiệc sinh nhật cho bé trai Trang trí tiệc cho bé gái Gói sự kiện chuyên nghiệp Chương trình giải trí hấp dẫn Dịch vụ hỗ trợ sự kiện Trang trí tiệc cưới đẹp Khởi đầu thành công với khai trương Chuyên gia tư vấn sự kiện Xem ảnh các sự kiện đẹp Tin mới về sự kiện Kết nối với đội ngũ chuyên gia Chú hề vui nhộn cho tiệc sinh nhật Ý tưởng tiệc cuối năm Tất niên độc đáo Trang trí tiệc hiện đại Tổ chức sinh nhật cho Hải Đăng Sinh nhật độc quyền Khánh Vân Phong cách tiệc Bích Ngân Trang trí tiệc bé Thanh Trang Thuê dịch vụ ông già Noel chuyên nghiệp Xem xiếc khỉ đặc sắc Xiếc quay đĩa thú vị

Filed under: Kiến thức lập trình - @ 10:21

Thẻ:

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa
Thiết kế website Thiết kế website Thiết kế website Cách kháng tài khoản quảng cáo Mua bán Fanpage Facebook Dịch vụ SEO Tổ chức sinh nhật