I have created a webpage that adds offers each time the user clicks add option. I just have to add an x button that closes each of the offers when the user clicks it. I bolded what needs to be changed to a button(onclick) in the javascript as well as provided the other code for the project.

html

Purchase Price:

Financing offer details

Cash Incentive:
Interest Rate:
Term (months):

javascript

function generateOption() {

var offerId = document.getElementById("offerDetails").children.length;

if(offerId < 3){ var initPurchPrice = parseFloat(document.getElementById("purchPrice").value); var cashIncentive = parseInt(document.getElementById("cashIncentive").value); var loanTerms = parseInt(document.getElementById("termInMonths").value); var interestRate = parseFloat(document.getElementById("intRate").value); var interestRatePerMonth = (interestRate/100)/loanTerms; var calculation = Math.pow((1+interestRatePerMonth),loanTerms); var finalPurchPrice = initPurchPrice - cashIncentive; var monthlyPayment = finalPurchPrice*interestRatePerMonth*calculation/(calculation - 1); var html = ''; html += "

"; html += ""; html += ""; html += ""; html +=""; html +=""; html +=""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += "

Offer "+(offerId+1)+":	X
Interest Rate:	"+ interestRate +"%
Loan Term (months):	"+ loanTerms +"
Monthly Payment:	$"+ monthlyPayment +"
Total cost of ownership:	$"+ finalPurchPrice +"

"; html += "

"; document.getElementById("offerDetails").insertAdjacentHTML('beforeend',html); }else{ alert("You have max of 3 offers"); }

}

style css

body { padding :20px; }

div.container { width: 100%; }

.container div{ padding-top:15px; }

.seperator{ border-bottom: 1.5px solid #aaafb3; margin-bottom:10px; } .innerTable { border: 2px solid #aaafb3; border-collapse: separate; border-spacing: 0; margin-top: 2px; } td,th {border:none}

button { background-color: white; border: 1px solid #aaafb3; color: black; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 8px; }

.column{ float: left; width: 32.1%; height: auto; margin-top: 5px; }

.item1, .item2, .item3{ display: block; border:1.5px solid #aaafb3; } .item2, .item3{ margin-left:18.5px; } .pprice{ width: 98%; padding-bottom:5px; border:1.5px solid #bbb2b2; padding:5px; } .innerTable td input{ width: 95%; padding-bottom:5px; border:1.5px solid #bbb2b2; padding:5px; } .offerDetails{ border: 1px solid red; height: 173px; width: 100%; padding: 0; }