We Keep Coding

jQuery clone() is appending to multiple elements instead of just one - javascript

I want to make clonable form fields that get wrapped in to the div. I am able to clone the element but the problem is if I have multiple groups of similar fields, it is adding fields to all other groups regardless instead of only to the group for the button I clicked.
How can I clone fields only for the current $(this) element and not for others?
let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');
btnAdd.on('click', function(event) {
$(this).parent().siblings('.gs-customer-form-group').children().last().clone().appendTo('.gs-customer-form-group');
});
.gs-customer-field-box {
background-color: #fff;
width: 300px;
margin: auto;
font-family: sans-serif
}
.gs-customer-btn-group {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.btnDel {
color: red;
cursor: pointer;
}
.btnAdd {
color: green;
cursor: pointer;
}
.active {
background-color: yellow;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry1" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
</div>
</div>
<hr/>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry2" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
</div>
</div>

The issue is due to the .appendTo('.gs-customer-form-group') call. This appends the cloned content in to every .gs-customer-form-group element. You need to only append to the one related to the clicked span. You already have a reference to that element from siblings(), so you can put it in a variable for use later:
let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');
btnAdd.on('click', function(event) {
let $group = $(this).parent().siblings('.gs-customer-form-group');
$group.children().last().clone().appendTo($group);
});
.gs-customer-field-box {
background-color: #fff;
width: 300px;
margin: auto;
font-family: sans-serif
}
.gs-customer-btn-group {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.btnDel {
color: red;
cursor: pointer;
}
.btnAdd {
color: green;
cursor: pointer;
}
.active {
background-color: yellow;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry1" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
</div>
</div>
<hr/>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry2" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
</div>
</div>

You can do it like this:
let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');
btnAdd.on('click', function(event){
$(this).parent().siblings('.gs-customer-form-group').children().last().clone().appendTo($(this).parent().siblings('.gs-customer-form-group'));
});
.gs-customer-field-box{
background-color: #fff;
width: 300px;
margin: auto;
font-family: sans-serif
}
.gs-customer-btn-group{
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.btnDel{
color: red;
cursor: pointer;
}
.btnAdd{
color: green;
cursor: pointer;
}
.active{
background-color: yellow;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry1" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
</div>
</div>
<hr />
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry2" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
</div>
</div>

Related

I am making a multistep form for a user to book a reservation. This form will let the user choose a few options at a time before submitting the form values to the database. I currently have the multistep form working through JS. I want to show all the values selected to the user one final time in the last ".input-group" Div labeled "Registration Confirm", and at this location they can submit the reservation after reviewing it is all correct. I am stuck on getting the final values to all show up in the last section however. I am aware the form is not done to be submitted to the database, I am trying to figure out how to show all the values before I go any further and do not mind if it is JS or Jquery.
I have tried saving the values to sessionStorage using this method for each option however it will not work. Dev tools is also telling me that no issues are arrising when I used this method so I am a bit stuck as nothing is showing up in the final div.
const destination = document.getElementById('result-destination').value;
sessionStorage.setItem("DESTINATION", destination);
const destinationChoice = sessionStorage.getItem('DESTINATION');
document.getElementById('choiceDestination').innerHTML = destinationChoice;
form.html
<form action="" class="registerForm" name="bookform">
<h1 id="registrationTitle">
Book Your Stay!
</h1>
<!-- Progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active" data-title="Room"></div>
<div class="progress-step" data-title="Contact"></div>
<div class="progress-step" data-title="Extras"></div>
<div class="progress-step" data-title="Confirm"></div>
</div>
<div class="form-step form-step-active">
<div class="input-group">
<select class="destination-choice select" id="result-destination" name="result-destination">
<option value="Choose Destination" disabled selected hidden>Choose Destination</option>
<option value="LasVegas">LasVegas</option>
<option value="Seattle">Seattle</option>
</select>
</div>
<div class="input-group">
<select class="room-choice select" id="result-room" name="result-room">
<option value="Choose Your Room" disabled selected hidden>Choose Your Room</option>
<option value="Double Full Beds">Double Full Beds</option>
<option value="Double Queen Beds">Double Queen Beds</option>
<option value="Queen Bed">Queen Bed</option>
<option value="King Bed">King Bed</option>
</select>
</div>
<div class="input-group">
<input type="date" id="result-checkin" />
<input type="date" id="result-checkout" />
</div>
<div class="">
<a class="btn btn-next width-50 ml-auto" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" />
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="guestNumber">Number Of Guests</label>
<select class="guestNumber select" id="guestNumber" name="guestNumber">
<option value="0" disabled selected hidden>How Many Guests Are There?</option>
<option value="1">1-2</option>
<option value="2">3-5</option>
</select>
</div>
<div class="input-group">
<label for="amenities">Amenities</label>
<input type="number" name="amenities" id="amenities" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="confirmRegistration">Registration Confirm</label>
<p id="choiceDestination"></p>
<p id="choiceRoom"></p>
<p id="choiceCheckin"></p>
<p id="choiceCheckout"></p>
<p id="choiceName"></p>
<p id="choicePhone"></p>
<p id="choiceEmail"></p>
<p id="choiceGuests"></p>
<p id="choiceAmenities"></p>
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<input type="submit" value="Submit" class="btn" />
</div>
</div>
</form>
form.js
const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");
let formStepsNum = 0;
nextBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum++;
updateFormSteps();
updateProgressbar();
});
});
prevBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum--;
updateFormSteps();
updateProgressbar();
});
});
function updateFormSteps() {
formSteps.forEach((formStep) => {
formStep.classList.contains("form-step-active") &&
formStep.classList.remove("form-step-active");
});
formSteps[formStepsNum].classList.add("form-step-active");
}
function updateProgressbar() {
progressSteps.forEach((progressStep, idx) => {
if (idx < formStepsNum + 1) {
progressStep.classList.add("progress-step-active");
} else {
progressStep.classList.remove("progress-step-active");
}
});
const progressActive = document.querySelectorAll(".progress-step-active");
progress.style.width =
((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}
form.css
/* Progress Bar Start */
.progressbar {
position: relative;
display: flex;
justify-content: space-around;
counter-reset: step;
margin: 0.5rem 0rem 0.5rem;
width: 50%;
}
.progressbar::before,
.progress {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 100%;
background-color: #dcdcdc;
z-index: -1;
}
.progress {
background-color: var(--primary-color);
width: 0%;
transition: 0.3s;
}
.progress-step {
width: 2.5rem;
height: 2.5rem;
background-color: #dcdcdc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.progress-step::before {
counter-increment: step;
content: counter(step);
}
.progress-step::after {
content: attr(data-title);
position: absolute;
top: calc(100% + 0.5rem);
font-size: 0.85rem;
color: #666;
}
.progress-step-active {
background-color: var(--highlight-yellow);
color: #f3f3f3;
}
/* Progress Bar End */
/* Form Start */
.form-step {
display: none;
transform-origin: top;
animation: animate .5s;
}
label {
color: var(--wei);
}
.form-step-active {
display: block;
}
.input-group {
margin: 2rem 0;
}
#keyframes animate {
from {
transform: scale(1, 0);
opacity: 0;
}
to {
transform: scale(1, 1);
opacity: 1;
}
}
/* Form End */
.registerForm {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#registrationTitle {
margin-top: 10px;
font-size: var(--font-size-24);
display: flex;
align-items: center;
justify-content: center;
color: var(--highlight-yellow);
font-family: var(--font-family-ubuntu);
font-weight: 400;
}
/* Buttons Start */
.btns-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.btn {
font-size: var(--font-size-20);
padding: 0.75rem;
display: block;
text-decoration: none;
background-color: var(--background-grey);
color: var(--background-blue);
text-align: center;
border-radius: 0.25rem;
border-color: var(--text-color);
border-style: solid;
cursor: pointer;
transition: 0.3s;
}
.btn:hover {
box-shadow: 0 0 0 2px var(--highlight-yellow), 0 0 0 2px var(--highlight-yellow);
border-color: var(--background-blue);
color: var(--background-blue);
-webkit-text-stroke: .5px var(--highlight-yellow);
}
/* Buttons End */
Any help is appreciated. Thank you!

Here you go :
HTML :
<form action="" class="registerForm" name="bookform">
<h1 id="registrationTitle">
Book Your Stay!
</h1>
<!-- Progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active" data-title="Room"></div>
<div class="progress-step" data-title="Contact"></div>
<div class="progress-step" data-title="Extras"></div>
<div class="progress-step" data-title="Confirm"></div>
</div>
<div class="form-step form-step-active">
<div class="input-group">
<select class="user_change destination-choice select" data-name="choiceDestination" id="result-destination" name="result-destination">
<option value="Choose Destination" disabled selected hidden>Choose Destination</option>
<option value="LasVegas">LasVegas</option>
<option value="Seattle">Seattle</option>
</select>
</div>
<div class="input-group">
<select class="user_change room-choice select" data-name="choiceRoom" id="result-room" name="result-room">
<option value="Choose Your Room" disabled selected hidden>Choose Your Room</option>
<option value="Double Full Beds">Double Full Beds</option>
<option value="Double Queen Beds">Double Queen Beds</option>
<option value="Queen Bed">Queen Bed</option>
<option value="King Bed">King Bed</option>
</select>
</div>
<div class="input-group">
<input type="date" class="user_change" data-name="choiceCheckin" id="result-checkin" />
<input type="date" class="user_change" data-name="choiceCheckout" id="result-checkout" />
</div>
<div class="">
<a class="btn btn-next width-50 ml-auto" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="name">Name</label>
<input type="text" class="user_change" data-name="choiceName" name="name" id="name" />
</div>
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" class="user_change" data-name="choicePhone" name="phone" id="phone" />
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="text" class="user_change" data-name="choiceEmail" name="email" id="email" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="guestNumber">Number Of Guests</label>
<select class="user_change guestNumber select" id="guestNumber" data-name="choiceGuests" name="guestNumber">
<option value="0" disabled selected hidden>How Many Guests Are There?</option>
<option value="1">1-2</option>
<option value="2">3-5</option>
</select>
</div>
<div class="input-group">
<label for="amenities">Amenities</label>
<input type="number" class="user_change" data-name="choiceAmenities" name="amenities" id="amenities" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="confirmRegistration">Registration Confirm</label>
<p id="choiceDestination"></p>
<p id="choiceRoom"></p>
<p id="choiceCheckin"></p>
<p id="choiceCheckout"></p>
<p id="choiceName"></p>
<p id="choicePhone"></p>
<p id="choiceEmail"></p>
<p id="choiceGuests"></p>
<p id="choiceAmenities"></p>
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<input type="submit" value="Submit" class="btn" />
</div>
</div>
</form>
Additional JS to Your JS :
// My Stuff
// Create an Empty Object
var the_data_obj = {};
// On change of input elements to update the object
$(".user_change").change(function(){
var changed_field = $(this).attr("data-name");
var changed_field_val = $(this).val();
the_data_obj[changed_field] = changed_field_val;
// Finally view the added stuff
$("#"+changed_field).text(changed_field_val);
console.log(the_data_obj);
});
What did i do..?
Added a new class user_change to every input you have there..
Added a new data attribute data-name to every input you have there..
Created a new Object.
On change of every input by user parsing the input field key by data-name and input field value by parsed data atrr.
Updated the same in new created Obj.
Printing the same value in the final div.
Here's the working JSFiddle for the same :
Ping me if you come across any issue.

What I am trying to do: I am adding new entries whenever I submit a form and that entry should have an animation (fadeIn effect). I am adding new entries whenever I submit a form. Every entry is being added using javascript template literal in which I am adding using divisions with classes and ids. Every entry has an Id and when I use that ID to add animation, all entries get the animation as they have same ids (I know IDs should not be same that is why I am trying to change it).
What I am trying to do: I am trying to change ID of previously added entry or div.
Program is changing ID only once.
My javascript code:
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map(student => {
var passport = student.imgLink;
return `
<div class="row" id="student-id-details" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map(student => {
return `
<div class="row" id="student-id-image" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
setTimeout(changeIds, 3000);
}
const changeIds = () => {
var oldId = document.getElementById("student-id-details");
oldId.id = "no-animation";
console.log(document.querySelectorAll("#student-id-details"));
console.log(document.querySelectorAll("#no-animation"));
}
I cannot use any library or framework for doing this task.
In changeIds function, I am changing the ID. When I keep adding new entries there is only 1 node in no-animation NodeList (the first entry) and after that no ID change is taking effect.
What can be the problem here?
My html code for reference -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
<script src="script_js.js"></script>
</body>
</html>
My css code for animation -
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#student-id-image{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#student-id-details{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
I would appreciate different solutions for achieving animations in new entries only too.

You have to apply fade-in-animation class to new entry, current logic apply animation class to all list.
I just update your code with minor changes, i hope it'll help you out. Thank You
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map((student, index) => {
var passport = student.imgLink;
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills} ${index}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map((student, index) => {
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
}
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in-animation{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
</body>
</html>

I'm using toggle() but it's not working. My script is in the footer:
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").toggle();
});
});
or I've also tried addClass():
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
Basically I'm just trying to toggle between showing and hiding the form divs.
When product-suggestion-form-container is clicked on, form-div-top should show.
When contact-us-form-container is clicked on, form-div-bottom should show.
Then they should hide when those divs are clicked on again.
Shouldn't clicking on product-suggestion-form-container cause form-div-top to become active and therefore to display: flex? Not sure why nothing's happening.
I was just getting the jQuery from here, but ideally I'd like to add a smooth transition and whatever other best practices you might suggest for doing this.
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
.form-div-outer {
margin: 10px 0;
}
.form-div-top,
.form-div-bottom {
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
/*initial display*/
.form-div-inner-top {
display: none;
}
.form-div-inner-bottom {
display: none;
}
.form-div-inner-top:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-div-inner-bottom:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-input {
margin: 10px 0;
padding: 5px;
border: none;
background-color: #ffffff;
width: 100%;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
<div class="form-div-outer">
<div class="contact-us-form-container">
<span class="form-title">Contact Us Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-bottom">
<form class="form-div-inner-bottom">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group input-group-contact-reason">
<div class="contact-reason-container">
<ul class="radiolist">
<li>
<input class="radio" type="radio"><label>Order question</label>
<input class="radio" type="radio"><label>Website feedback</label>
<input class="radio" type="radio"><label>Trouble finding product</label>
</li>
</ul>
</div>
</span>
</form>
</div>
</div>

It seems you have forgot .s in your code to access the data.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle();
});
});

I have a sign up form and I want to add 2 linked select box to the form, the linked select box code works find separatly but when I try to add it into the form it doesn't show up.
I tried to add the code into a div under the password block but didn't work for me
EDIT: so we figured out that the problem isn't with the code but is something that i'm doing wrong with the Angular. when I open the project (in visual studio code) that includes the html,TS,CSS the select box won't show up. when we tried to run it not as an angular project and without the TS the select box did show up. can someone help me?
This is the linked select box:
<script>
var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');
function giveSelection(selValue) {
sel2.innerHTML = '';
for(var i = 0; i < options2.length; i++) {
if(options2[i].dataset.option === selValue) {
sel2.appendChild(options2[i]);
}
}
}
giveSelection(sel1.value);
</script>
<select id="sel1" onchange="giveSelection(this.value)">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
<option data-option="a">apple</option>
<option data-option="a">airplane</option>
<option data-option="b">banana</option>
<option data-option="b">book</option>
</select>
And this is the main sign up form:
<div class="container">
<div class="row">
<div class="col s10 offset-s1" id="panel">
<div class="progress" *ngIf="showSpinner">
<div class="indeterminate"></div>
</div>
<h3 id="title">Sign Up</h3>
<div id="errorMsg" *ngIf="errorMessage">
<span>{{errorMessage}}</span>
</div>
<form class="col s12" [formGroup]="signupForm" novalidate (ngSubmit)="signupUser()">
<div class="row">
<div class="input-field col s12">
<input id="user_name" type="text" formControlName="username" autocomplete="off">
<label for="user_name">Username</label>
<span class="error" *ngIf="!signupForm.controls['username'].valid && signupForm.controls['username'].touched">
Username is required
</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" formControlName="email" autocomplete="off">
<label for="email">Email</label>
<span class="error" *ngIf="!signupForm.controls['email'].valid && signupForm.controls['email'].touched">
Email is required
</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="pass-word" type="password" formControlName="password">
<label for="pass-word">Password</label>
<span class="error" *ngIf="!signupForm.controls['password'].valid && signupForm.controls['password'].touched">
Password is required
</span>
</div>
</div>
<button class="btn waves-effect" id="signupbtn" [disabled]="!signupForm.valid">
Sign Up
</button>
</form>
</div>
</div>
</div>
Hope to get some help with that

I added your linked select boxes to the form under password. It works fine. What specific problem or error message age you getting?
Update: added your css. It's not causing the problem. Try disabling your TS file and see if the code works
var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');
function giveSelection(selValue) {
sel2.innerHTML = '';
for(var i = 0; i < options2.length; i++) {
if(options2[i].dataset.option === selValue) {
sel2.appendChild(options2[i]);
}
}
}
giveSelection(sel1.value);
#panel {
background-color: #ffffff;
}
#signupbtn {
float: right;
margin-right: 10px;
background-color: #64b5f6;
font-weight: 500;
}
#title {
background-color: #64b5f6;
color: white;
padding: 8px;
margin-top: 0px;
font-weight: 700;
text-align: center;
}
form {
padding: 0px;
border-radius: 3px;
box-sizing: border-box;
margin: 0px 20px 0px 20px;
}
.error {
color: red;
}
.indeterminate {
background-color: #64b5f6 !important;
}
.input-field {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
#errorMsg {
background: #f6b2b5;
width: 100%;
height: 50px;
text-align: center;
}
#errorMsg span {
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
position: relative;
float: left;
font-size: 15px;
}
<div class="container">
<div class="row">
<div class="col s10 offset-s1" id="panel">
<div class="progress" *ngIf="showSpinner">
<div class="indeterminate"></div>
</div>
<h3 id="title">Sign Up</h3>
<div id="errorMsg" *ngIf="errorMessage">
<span>{{errorMessage}}</span>
</div>
<form class="col s12" [formGroup]="signupForm" novalidate (ngSubmit)="signupUser()">
<div class="row">
<div class="input-field col s12">
<input id="user_name" type="text" formControlName="username" autocomplete="off">
<label for="user_name">Username</label>
<span class="error" *ngIf="!signupForm.controls['username'].valid && signupForm.controls['username'].touched">
Username is required
</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" formControlName="email" autocomplete="off">
<label for="email">Email</label>
<span class="error" *ngIf="!signupForm.controls['email'].valid && signupForm.controls['email'].touched">
Email is required
</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="pass-word" type="password" formControlName="password">
<label for="pass-word">Password</label>
<span class="error" *ngIf="!signupForm.controls['password'].valid && signupForm.controls['password'].touched">
Password is required
</span>
</div>
</div>
<div>
<select id="sel1" onchange="giveSelection(this.value)">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
<option data-option="a">apple</option>
<option data-option="a">airplane</option>
<option data-option="b">banana</option>
<option data-option="b">book</option>
</select>
</div>
<button class="btn waves-effect" id="signupbtn" [disabled]="!signupForm.valid">
Sign Up
</button>
</form>
</div>
</div>
</div>

I have tried to add a form wizard with validation. The main problem I am facing is the disable function of the steps doesnt work. When I click on the step numbers on top, it just goes off without any validation.
Here is my html
<div class="x_content">
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button>
</div>
</div>
</div>
</form>
</div>
</div>
My CSS:
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
The JS:
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
Please let me know what am I doing wrong. How can I get it to work normally.
Thanks a lot.

You are triggering the click event from allNextBtn.click(function(){.
You may consider trigger( event [, extraParameters ] ) can use extra parameters.
Taking advantage of this you may distinguish if you are triggering from the above function or from the user.
Moreover, before to remove disabled atribute for the next element:
nextStepWizard.removeAttr('disabled').trigger('click', {'isManual': true});
you need to add the disabled attribute to all (so only one will be enabled):
$('div.setup-panel div a[href^="#"]').attr('disabled', 'disabled')
My snippet:
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e, isManual) {
e.preventDefault();
//
// test if the click event is ....
//
if (($('div.setup-panel div a[disabled]').length == ($('div.setup-panel div a').length - 1)) &&
(isManual === undefined)) {
return;
}
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid) {
if (nextStepWizard.index(('div.setup-panel div a')) == ($('div.setup-panel div a').length - 1)) {
//
// remove the disabled attribute to all
//
$('div.setup-panel div a[href^="#"]').removeAttr('disabled');
nextStepWizard.trigger('click', {'isManual': true});
} else {
//
// add the disabled attribute to all
//
$('div.setup-panel div a[href^="#"]').attr('disabled', 'disabled');
//
// remove disabled only for the right element
//
nextStepWizard.removeAttr('disabled').trigger('click', {'isManual': true});
}
}
});
$('div.setup-panel div a.btn-primary').trigger('click', {'isManual': true});
});
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="x_content">
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button>
</div>
</div>
</div>
</form>
</div>
</div>