Here is the output of the current code:

Here is the expected output, which means that I need to change the buttons to look like the ones in this:

Also, need to change the code so that all user inputs should be validated. Some specifics include: 1) Interest rate should be greater than 0.0% and less than 10.0%, 2) Term in months should be greater than or equal to 24 and less than or equal to 72, 3) Purchase price should be greater than 0 and less than $100000.

html code

Purchase Price:

Financing offer details

Cash Incentive:
Interest Rate:
Term (months):

javascript code

function closeOption(offerId){ //Getting Offer div which was close to remove var element = document.getElementById(offerId); element.remove(); var i; for(i=offerId;i"; html += "

"; html += ""; //Added id for td to change Offer text after closing the previous offer html += ""; //Added id for td to change onclick value of next offers html +=""; html +=""; html +=""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += "

Offer "+(offerId+1)+":
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"); } }

css code

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}

openbutton { 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; } .closebutton { background-color: white; color: black; 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; }