Develop Reference

How to show and hide multiple drop downs and buttons using single button

<div class="content">
<div class="row" style="margin-top: 27px;">
<div class="col-sm-2" style="width: 13%;">
<select id = "app" class="form_input_box">
<option value="" selected="selected">App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<select id = "app or not" class="form_input_box">
<option value="" selected="selected" hidden>App Type</option>
<option value="" selected>App Type</option>
<option value="1">App</option>
<option value="2">Not a App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;">
<select id = "dept" class="form_input_box">
<option value="" selected="selected">Department</option>
</select>
</div>
<div class="col-sm-1" style="margin-left: -25px;width: 12%;">
<input type="text" name="date_box" id="date_box" class="form_input_box filter_date" Placeholder="Created Date">
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<input type="text" name="search" id="search" class="form_input_box" Placeholder="Search">
</div>
<div class="col-sm-1" style="margin-left: -25px;">
<button id="erase" class="form-control btn btn-primary" name="erase">Clear values</button>
</div>
<div class="row">
<div class="col-sm-1">
<input type="month" id="month" name="month" class="form_input_box" placeholder="Month">
</div>
<div class="col-sm-2" style="right: 30px">
<button type="button" name="report" id="file" class="button">Report file</button>
</div>
</div>
</div>
</div>
i have html page with buttons drop downs like above i need to set a single button when i click on the button it will show all these things if i again click then these need to be hided how can i achieve this.

To solve the problem simply you could use javascript or jquery and hide or show the options based on the selected values...
$('idoption').hide();
$('idoption').show();

Show Div/Hide if one of the select options from optgroup is selected Javascript

I'm trying to modify and example from this same page but its not working as I want.
I have two groups in a select, and I want chose any option from one of the second group "Unique" and if you select any option from that group show Div, else show nothing.
the html:
<div class="form-floating mb-3 mt-3">
<table>
<tr>
<td><input class="form-control input-lg email" type="email"
name="mail[]" required />
</td>
<td>
<select class="form-select" name="skills[]" required>
<optgroup Class="unique" label="Common">
<option value="Extraction">Extraction</option>
<option value="Hunting">Hunting</option>
<option value="Farming">Farming</option>
</optgroup>
<optgroup class="unique" label="Unique">
<option value="Diplomacy">Diplomacy</option>
<option value="Survival">Survival</option>
</optgroup>
</select>
</td>
<td>
</tr>
</table>
</div>
<div class="mt-5 extras" id="mydiv">
<h4 class="text-dark">Check</h4>
Increased through making items, sewing and cooking.<br>
<input class="form-check-input" type="checkbox" name="checkpoint"
checked required/>
</div>
the Js:
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value ==
'Diplomacy' || 'Survival' ? 'block' : 'none';
}
css :
.extras{
display: none;
}

You can access the optgroup by finding the selected option, using closest() to find the enclosing optgroup tag, then accessing it's label attribute
function doSomething(element) {
// get optgroup
let optgroup = element.options[element.options.selectedIndex].closest('optgroup').getAttribute('label')
console.log(optgroup)
if (optgroup == 'Unique') {
console.log("do something ...")
}
}
.extras {
display: none;
}
<div class="form-floating mb-3 mt-3">
<table>
<tr>
<td><input class="form-control input-lg email" type="email" name="mail[]" required />
</td>
<td>
<select class="form-select" name="skills[]" onchange='doSomething(this)' required>
<optgroup Class="unique" label="Common">
<option value="Extraction">Extraction</option>
<option value="Hunting">Hunting</option>
<option value="Farming">Farming</option>
</optgroup>
<optgroup class="unique" label="Unique">
<option value="Diplomacy">Diplomacy</option>
<option value="Survival">Survival</option>
</optgroup>
</select>
</td>
<td>
</tr>
</table>
</div>
<div class="mt-5 extras" id="mydiv">
<h4 class="text-dark">Check</h4>
Increased through making items, sewing and cooking.<br>
<input class="form-check-input" type="checkbox" name="checkpoint" checked required/>
</div>

Javascript Border and button line break question

I'm having a few issues with my javascript webpage. My first question is how to create a small border that wraps around a title? The bottom portion of my professor's sample webpage looks like this: https://i.imgur.com/4DVozv9.png
The bottom portion of my webpage so far looks like this: https://i.imgur.com/8STmOGd.png
I don't understand how to make that small border that circles around the "Shipping Method", "Shipping Address", and "Payment Details" titles.
Also for some reason the "" tag on my "Complete Payment" button isn't placing my button on the next line for some reason. Here is my code so far, note though that it's incomplete so my functions and other features aren't ready yet, right now I'm just focusing purely on presentation. Thank you for your time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>YOUR NAME Final Project Checkout</title>
<link href="layout.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="guest-functions.js"></script>
<script type="text/javascript" src="cart-functions.js"></script>
<script>
window.onload=function(){
setGuest();
updateCartTotal();
}
</script>
</head>
<body>
<header><img src="90s-Gamers-Logo.png" width="798" height="82" alt="My Company"/></header>
<nav>
<form id="form1" name="form1" method="post">
<p>Choose a page to visit:<br>
<select name="select" id="select" onchange="location = this.options[this.selectedIndex].value;">
<option value="index.html">Home</option>
<option value="shop.html">Shop</option>
<option value="cart.html">Cart</option>
<option value="checkout.html" selected="selected">Checkout</option>
</select>
</p><br>
<p><b>Welcome Guest!</b></p>
<p>Enter your name:</p>
<input id="sign-in-text"><br>
<button onclick="setGuest()" id="sign-in-button">Sign-In</button><br><br>
<p>Your shopping cart is now</p>
<!--Need variable here-->
<p><b>empty!</b></p>
</form>
<p> </p>
<div id="divGuestArea"> </div>
<p> </p>
<div id="divCartSummary"> </div>
</nav>
<div id="main">
<h1>Checkout</h1>
<!--<p>This is where the transaction would take place so create a form here to take care of that final process as appropriate. Such form fields as contact info, shipping method, payment method, receipt, etc. Use HTML attributes wisely to help with validation and write JavaScript to validate any needed fields that are not sure to be validated by this HTML.</p>
<p>Connect your form to a "thankyou.html" page that you create so that after the form is submitted and found to be filled out properly, you thank them by name on "thankyou.html".</p>-->
<table border="1" cellspacing="0" cellpadding="6" summary="Table of Quantity, Description, Price, and Product Totals">
<tbody>
<tr>
<td><b>Quantity</b></td>
<td><b>Description</b></td>
<td><b>Price</b></td>
<td><b>Product Total</b></td>
</tr>
<tr style="text-align:right">
<td>later</td>
<td>later</td>
<td>later</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td>later</td>
<td>later</td>
<td>later</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td colspan="3">Subtotal:</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td colspan="3">Tax:</td>
<td>later</td>
</tr>
<tr style="text-align:right">
<td colspan="3"><b>Grand total:</b></td>
<td><b>later</b></td>
</tr>
</tbody>
</table><br>
<p>Display total amount</p>
<p>Shipping Method</p>
<p> <input type="radio" name="ShipType" id="standard" value="2">
<label for="standard">Standard Shipping ($2)</label>
<input type="radio" name="ShipType" id="2-day" value="5">
<label for="2-day">2-Day Shipping ($5)</label>
<input type="radio" name="ShipType" id="overnight" value="10">
<label for="overnight">Overnight Shipping ($10)</label>
<br>
<p>Shipping Address</p>
Full Name:
<input type="text" id="FullName" name="FullName">
Street Address:
<input type="text" id="StreetAddress" name="StreetAddress"><br><br>
City:
<input type="text" id="City" name="City">
State/Province/Region:
<input type="text" id="State" name="State"><br><br>
ZIP:
<input type="text" id="Zip" name="Zip">
Country:
<input type="text" id="Country" name="Country"><br><br>
Phone Number:
<input type="text" id="PhoneNumber" name="PhoneNumber"><br>
<p>Payment Details</p>
<select id="selPayment" name="selPayment" onChange="getSelectValue();">
<option value="" selected="selected">- Choose one -</option>
<option value="Visa">Visa Credit</option>
<option value="MasterCard">MasterCard Credit</option>
<option value="American Express">American Express Credit</option>
<option value="Debit Card">Debit Card</option>
<option value="Pay Pal">Paypal</option>
</select> <br><br>
Card #:
<input type="text" id="CardNumber" name="CardNumber"><br><br>
Expiration Month:
<select id="selMonth" name="selMonth" onChange="getSelectMonth();">
<option value="" selected="selected">- Choose one -</option>
<option value="January">January</option>
<option value="February">Febraury</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select> <br><br>
Expiration Year:
<select id="selYear" name="selYear" onChange="getSelectYear();">
<option value="" selected="selected">- Choose one -</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<br><p>
<input type="button" value="Complete Payment"
onclick="storeAndGo();">
</p>
<footer>
Copyright 2020, 90's Gamers.
</footer>
</div>
</body>
</html>

You can add a div to your 3 sections, and you can set border to this.

I don't understand how to make that small border that circles around the "Shipping Method", "Shipping Address", and "Payment Details" titles.
CSS
border: 1px solid;
border-radius: 25px;

Creating multiple selection lists based that display an image based what you select

I'm working on a project where a user can select options from three sections on a webpage. Red Wine, White Wine, and Rose. Within those sections, they can choose from a drop-down menu that provides different wines within the category of flavor.
For example, Red Wine wine would allow you to choose from three flavors, white wine would allow you to choose from three other flavors, etc.
The issue I'm having is that whatever section I make last, is the only one that changes. If I go to change the wine selection under red it changes the rose section.
HTML
<div class="vl3"></div>
<div class="vl4"></div>
<div class="redwine">Red Wine<br> </div>
<div class="redwineselect">
<form action="purchase.htm" method="post"><br>
Select Your Red...<br><br>
<img src="merlot.png" id="redSelect" height="400px"> <br>
<select name="redList" onchange="displayImage(this);">
<option value="merlot.png">Merlot</option>
<option value="pinot_nior.png">Pinot Noir</option>
<option value="cabernet_red.png">Cabernet</option>
</select>
<input type="text" value="" placeholder="Quantity" required size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
` </form>
</div>
<div class="whitewine">White Wine<br></div>
<div class="whitewineselect">
<form action="purchase.htm" method="post"><br>
Select Your White...<br><br>
<img src="pinot_grigio.png" id="whiteSelect" height="400px"><br>
<select name="whiteList" onchange="displayImage(this);">
<option value="pinot_grigio.png">Pinot Grigio</option>
<option value="riesling.png">Reisling</option>
<option value="chardonnay.png">Chardonnay</option>
</select>
<input type="text" value="" placeholder="Quantity" required size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
</form>
</div>
<div class="rosewine">Rose Wine</div>
<div class="rosewineselect">
<form action="purchase.htm" method="post"><br>
Select Your Rose...<br><br>
<img src="grenache.png" id="roseSelect" height="400px"><br>
<select name="roseList" onchange="displayImage(this);">
<option value="grenache.png">Grenache</option>
<option value="mourverde.png">Mourverde</option>
<option value="pinot_rose.png">Pinot Rose</option>
</select>
<input type="text" value="" placeholder="Quantity" requried size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
</form>
</div>
JavaScript
function displayImage(elem){var image=document.getElementById("redSelect");image.src=elem.value;
}
function displayImage(elem){var image=document.getElementById("whiteSelect");image.src=elem.value;
}
function displayImage(elem){var image=document.getElementById("roseSelect");image.src=elem.value;
}

Try different method names
<div class="vl3"></div>
<div class="vl4"></div>
<div class="redwine">Red Wine<br> </div>
<div class="redwineselect">
<form action="purchase.htm" method="post"><br>
Select Your Red...<br><br>
<img src="merlot.png" id="redSelect" height="400px"> <br>
<select name="redList" onchange="displayRedImage(this);">
<option value="merlot.png">Merlot</option>
<option value="pinot_nior.png">Pinot Noir</option>
<option value="cabernet_red.png">Cabernet</option>
</select>
<input type="text" value="" placeholder="Quantity" required size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
` </form>
</div>
<div class="whitewine">White Wine<br></div>
<div class="whitewineselect">
<form action="purchase.htm" method="post"><br>
Select Your White...<br><br>
<img src="pinot_grigio.png" id="whiteSelect" height="400px"><br>
<select name="whiteList" onchange="displayWhiteImage(this);">
<option value="pinot_grigio.png">Pinot Grigio</option>
<option value="riesling.png">Reisling</option>
<option value="chardonnay.png">Chardonnay</option>
</select>
<input type="text" value="" placeholder="Quantity" required size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
</form>
</div>
<div class="rosewine">Rose Wine</div>
<div class="rosewineselect">
<form action="purchase.htm" method="post"><br>
Select Your Rose...<br><br>
<img src="grenache.png" id="roseSelect" height="400px"><br>
<select name="roseList" onchange="displayRoseImage(this);">
<option value="grenache.png">Grenache</option>
<option value="mourverde.png">Mourverde</option>
<option value="pinot_rose.png">Pinot Rose</option>
</select>
<input type="text" value="" placeholder="Quantity" requried size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
</form>
</div>
function displayRedImage(elem){var image=document.getElementById("redSelect");image.src=elem.value;
}
function displayWhiteImage(elem){var image=document.getElementById("whiteSelect");image.src=elem.value;
}
function displayRoseImage(elem){var image=document.getElementById("roseSelect");image.src=elem.value;
}

Your three functions have the same name, so they are overriding each other. Give each of them a different name and it will work.

How to add <div> in <form> on button click html and jquery

I want to add the following div structure whenever the '+' button [the addMore() function] is clicked. Although i am able to add the div structure, but the alignment of the input text are not equal as compared to the hard coded.
html file:
<form class="align-center">
<p class="6u 12u$(medium)">
Start Date: <input type="date" name="startdate" id="startdate" />
End Date: <input type="date" name="enddate" id="enddate" />
</p>
<p>
<div class="6u$ 12u$(xsmall)"><input type="text" name="numParticipants" id="numParticipants" value="" placeholder="Number of Participants"/></div>
</p>
<p>
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<div>OR</div>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Venue" />
</div>
</div>
</div>
</p>
<p>
<div class="row" id="newProg">
</div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()"><div style="font-size: 35px">+</div></a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()"><div style="font-size: 35px">-</div></a>
</div>
</div>
<div class="2u 12u$(medium); image right">
Submit
</div>
</p>
</form>
main.js
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.setAttribute('class', 'row');
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <input type="text" value="" placeholder="Customize your own programme"/> </div> <div class="3u$ 12u$(medium)"> <input type="text" value="" placeholder="Venue" /> </div> ';
document.getElementById('newProg').appendChild(objNewDiv);
}
Result when page is loaded:
when page loaded
Actual and Expected result:
actual and expected outcome

You have differenc in the class names of the div tags which you are appending in jquery.
Make it same as the Static HTML content, And the expected result will be achieved.
Differences I see is as below.
Static HTML has - <div class="3u 12u$(medium)"> ,Your Jquery HTML has - <div class="5u 12u$(medium)">
Static HTML has - <div class="3u 12u$(medium)">, Your jquery HTML has - <div class="5u 12u$(medium)">
Static HTml has - <div class="2u$ 12u$(medium)">, Your Jquery HTML has <div class="3u$ 12u$(medium)">
Because of the differences in the class names you find the differences in the way its rendered in the UI.

You missed one of your divs in JavaScript inner HTML string. I think it should be like this:
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div> <div class="3u$ 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Venue" /> </div> </div> ';