We Keep Coding

Replace button with another button

I am making a CV builder, and I already made a button with jQuery to add and delete a form, but when I add, it just goes down, so I can add more, but the first form stays there, and I cannot delete the first form.
Example
You see how it goes down, and I need a button so I can remove the first one also:
As you can see in the pictures, i add a form, and a form comes up, but the add button moves down, as it should, because I put it aside of the div. But I need to add a red button to delete the first form, if someone wants to.
$(document).ready(function() {
$(".add-more").click(function(){
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
});
})(this.jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="col-xl-12">
<div id="test1" class="dashboard-box">
<!-- Headline -->
<div class="headline">
<h3><i class="icon-material-outline-school"></i> Obrazovanje</h3>
</div>
<div class="content with-padding">
<div class="forma">
<div class="row">
<label class="control-label col-xl-12" for="ContactNo"></label>
<div class="col-xl-12">
<div class="input-group control-group after-add-more">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija[]" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<label>Zvanje</label>
<input name="cv_obrazovanje_zvanje[]" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak[]">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj[]">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox[]" type="checkbox" id="chekcbox">
<label for="chekcbox"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
</div>
</div>
<!-- Dugme za dodavanje -->
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button" style="padding-left: 15px;"><span class="button ripple-effect">Dodajte</span></button>
</div>
<!-- Dugme za dodavanje -->
<div class="copy hide" style="display: none;">
<div class="control-group input-group" style="margin-top:10px">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<laabel>Zvanje</label>
<input name="cv_obrazovanje_zvanje" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox" type="checkbox" id="chekcbox2">
<label for="chekcbox2"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><span class="button ripple-effect" style="background-color: #B31C1C;">Ukloni</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="col-xl-12">
Snimite promene
</div>
</div>

Consider the following.
$(function() {
$(".add-more").click(function() {
var html = $(".copy").html();
if (!$(this).hasClass("clicked")) {
console.log("Adding Button");
$("<div>", {
class: "input-group-btn"
}).appendTo($(".row:eq(0) .input-group:eq(0)").eq(0));
$("<button>", {
class: "btn btn-danger remove",
type: "button"
}).html("<span class='button ripple-effect' style='background-color: #B31C1C;'>Ukloni</span>").appendTo($(".row:eq(0) .input-group:eq(0) .input-group-btn"));
$(this).addClass("clicked");
}
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div class="col-xl-12">
<div id="test1" class="dashboard-box">
<!-- Headline -->
<div class="headline">
<h3><i class="icon-material-outline-school"></i> Obrazovanje</h3>
</div>
<div class="content with-padding">
<div class="forma">
<div class="row">
<label class="control-label col-xl-12" for="ContactNo"></label>
<div class="col-xl-12">
<div class="input-group control-group after-add-more">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija[]" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<label>Zvanje</label>
<input name="cv_obrazovanje_zvanje[]" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak[]">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj[]">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox[]" type="checkbox" id="chekcbox">
<label for="chekcbox"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
</div>
</div>
<!-- Dugme za dodavanje -->
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button" style="padding-left: 15px;"><span class="button ripple-effect">Dodajte</span></button>
</div>
<!-- Dugme za dodavanje -->
<div class="copy hide" style="display: none;">
<div class="control-group input-group" style="margin-top:10px">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<laabel>Zvanje</label>
<input name="cv_obrazovanje_zvanje" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox" type="checkbox" id="chekcbox2">
<label for="chekcbox2"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><span class="button ripple-effect" style="background-color: #B31C1C;">Ukloni</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="col-xl-12">
Snimite promene
</div>
</div>
It seems you only want to add the button the first click. We can check to see if a Class exists as a quick check, if it does NOT exists, we can perform the one-time action, and add the Class.
Then it is just a matter of adding the proper elements.

jQuery find DIV inner value when click on radio button

What I'm trying to get is the immediate upper div value (Accounts Admin) when I'm clicking on a radio button.
Below is my HTML structure. Whenever I click on the admin or alan radio button give me the div inner text Accounts Admin.
How can get that value?
<div class="display-flex flex-row">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input
id="admin"
type="radio"
value="admin"
name="eng-name"
class="eng-name userlist active"
/>
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input
id="alan"
type="radio"
value="alan"
name="eng-name"
class="eng-name userlist active"
/>
</div>
</div>
</div>
I'm trying this way but I can't get the value.
$(this).parent().find(".ez-sub-heading").text()

Assuming you have multiple blocks of this, I would change the html structure a bit so you have a wrapper around the complete block. With the closest() function you can find the first wrapper parent and then use find() to look for the header element.
You can use trim() to remove the whitespace caused by code indention.
$('.userlist').on('click', (e) => {
var text = $(e.currentTarget).closest('.wrapper').find('.ez-sub-heading').text();
console.log(text.trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-flex flex-row wrapper">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
</div>
<div class="display-flex flex-row wrapper">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin 2
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name2" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name2" class="eng-name userlist active">
</div>
</div>
</div>
</div>

With your HTML structure as it is, you need to find the closest (nearest parent) .row and then use prevAll to get the header row.
$(this).closest(".row").prevAll(".flex-row").first().text().trim()
$("input.userlist").click(function() {
console.log($(this).closest(".row").prevAll(".flex-row").first().text().trim())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-flex flex-row">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="display-flex flex-row">
<div class="p-1 ez-sub-heading mt-1">
Second Header
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
A small change to the HTML structure and adding some classes would make this much simpler (not included here as already suggested in the other answer).

Autosave PHP form with multiple items and save in mysqli with ajax

I have a form with multiple tabs. Each tab has various items (textboxes, radio buttons, drop down boxes). I need the content to be saved after 15 seconds idle or when the user clicks on submit button all tabs content will save and in mysqli different tables can store information.
If any suggestions please write sample code for save the information with different tables also
<form>
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="header-title m-t-0 m-b-30">Material Management</h4>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#quote" data-toggle="tab" aria-expanded="true" class="nav-link active">
Quotes
</a>
</li>
<li class="nav-item">
<a href="#purchase" data-toggle="tab" aria-expanded="false" class="nav-link">
Purchases
</a>
</li>
<li class="nav-item">
<a href="#usage" data-toggle="tab" aria-expanded="false" class="nav-link">
Usage
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="quote">
<i class="mdi mdi-plus"><button type="button" class='addmore'>Add More</button></i>
<form id='students' method='post' name='students'>
<table border="1" cellspacing="0" class="table-responsive">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()" /></th>
<th>S.No</th>
<th>Q.No</th>
<th>Item Name</th>
<th>Categories</th>
<th>Brand</th>
<th>Qty</th>
<th>Rate</th>
<th>Amount</th>
<th>Quote Pic</th>
<th>Others</th>
</tr>
<tr>
<td><input type='checkbox' class='case' /></td>
<td><span id='snum'>1</span></td>
<td><span id='qnum'>1</span></td>
<td><input type='text' id='item_name' name='item_name[]' /></td>
<td><input type='text' id='categories' name='categories[]' /></td>
<td><input type='text' id='brand' name='brand[]' /></td>
<td width="10%"><input type='text' id='qty' name='qty[]' /> </td>
<td width="10%"><input type='text' id='rate' name='rate[]' /></td>
<td width="10%"><input type='text' id='amount' name='amount[]' /> </td>
<td width="10%"><input type='text' id='qpic' name='qpic[]' /> </td>
<td width="10%"><input type='text' id='others' name='others[]' /> </td>
</tr>
</table>
<button type="button" class='delete'>- Delete</button>
<p>
</div>
<!--Quotes Div Close-->
<div class="tab-pane fade" id="purchase">
<div class="row">
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">S.No</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">Q.No</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">Itemname</label>
<input type="text" class="form-control" id="field-4" placeholder="Boston">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="field-5" class="control-label">Categories</label>
<input type="text" class="form-control" id="field-5" placeholder="categories">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Brand</label>
<input type="text" name="country" id="autocomplete-ajax" class="form-control" autocomplete="off">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">Qty</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-5" class="control-label">Rate</label>
<input type="text" class="form-control" id="field-5" placeholder="1234.00">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="field-6" class="control-label">Amount</label>
<input type="text" class="form-control" id="field-6" placeholder="123456">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Inv. Pic</label>
<input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Others</label>
<input type="text" class="form-control" id="field-6" placeholder="123456">
</div>
</div>
</div>
<!-- row-->
</div>
<!-- Purchase Div Close-->
<div class="tab-pane fade" id="usage">
<div class="row">
<!-- Inline Form -->
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"></h4>
<div class="row">
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">S. No. </label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="field-5" class="control-label">Item Name </label>
<input type="text" class="form-control" id="field-5" placeholder="Item Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Qty</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="field-6" class="control-label">Usage For </label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
</div>
<!--row-->
</div>
<!--end card box-->
</div>
<!--end col-md-12-->
</div>
<!-- end row / End Inline form-->
</div>
<!-- Usage Div-->
</div>
<!-- Tab Content-->
</div>
<!-- Close card-box -->
</div>
<!--col-lg-12-->
</div>
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="header-title m-t-0 m-b-30">Labour Management</h4>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#inhouse" data-toggle="tab" aria-expanded="true" class="nav-link active">
In House
</a>
</li>
<!-- <li class="nav-item">
<a href="#scontract" data-toggle="tab" aria-expanded="false" class="nav-link">
Sub Contract
</a>
</li> -->
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="inhouse">
<!-- Inline Form -->
<div class="row">
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><i class="mdi mdi-plus"></i></h4>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">Category Of Labour</label>
<input type="text" class="form-control" id="field-4" placeholder="Mastrey">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">No.Of. Workers</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">Per Head Amount</label>
<input type="text" class="form-control" id="field-4" placeholder="Boston">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">Total Amount</label>
<input type="text" class="form-control" id="field-4" placeholder="Boston">
</div>
</div>
</div><!--row close-->
</div><!--card box close-->
</div><!--div md 12 close-->
</div><!-- end row / End Inline form-->
</div><!--in house tab close-->
</div><!--tab content-->
</div><!-- Close card-box -->
</div> <!--col-lg-12-->
</div>
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="header-title m-t-0 m-b-30">Work In Progress</h4>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#winhouse" data-toggle="tab" aria-expanded="true" class="nav-link active">
In House
</a>
</li>
<li class="nav-item">
<a href="#wsubcontract" data-toggle="tab" aria-expanded="false" class="nav-link">
Sub Contract
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="winhouse">
<!-- Inline Form -->
<div class="row">
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><i class="mdi mdi-plus"></i></h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="field-6" class="control-label">Usage For </label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="field-6" class="control-label">Inv. Pic</label>
<input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</div>
</div>
</div>
</div>
</div>
</div> <!-- end row / End Inline form-->
</div><!--winhouse close-->
<div class="tab-pane fade" id="wsubcontract">
<!-- Inline Form -->
<div class="row">
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><i class="mdi mdi-plus"></i></h4>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="field-6" class="control-label">Notes </label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-6" class="control-label">Upload Pics</label>
<input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="field-4" class="control-label">No.Of. Workers</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end row / End Inline form-->
</div><!--wsubconant-->
</div><!--tab content-->
</div>
<!-- Close card-box -->
</div>
<!--col-lg-12-->
</div>
</form>
here single form i have 3 divs and each div i have two or more tabs how can i store the all information with different databases
for example in material estimation div i have 3 tabs
1. Quotes
2. Purchase
3. Usage
in quotes tabs add new rows click add another row like no restrictions is there like purchases also
quotes data can store quotes table and purchase data can store purchase table usage data store in usage table
how i have only for single submit button for hole form and edit also add like
how is it is possible to make that one
if possible please write a code snippet and save to db
i have worked also ajax form not successfully so please if any one make code write for u s thank u

you can write in form action page look like this and also each and every field you can assign the name/id first then write form action page
if example i have taken one item
if(!empty($catlabours)) {
//your code
}

JQuery: start slideToggle() as hidden

I created this:
$(document).ready(function(){
var speed = 500;
$('.brewed').click(function(){
$('.ifBrewed').slideToggle(speed);
});
});
html, body {
background-color: black;
color: white;
}
input[type=checkbox] {
display:none;
}
.step_1, .step_2, .step_3 {
padding: 2%;
margin: 0 auto;
font-weight: 100;
}
input[type=checkbox]:checked + label {
border: 3px solid white;
}
.ifBrewed {
background-color: #181818;
padding: 2%;
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!-- Step 1 -->
<div class="row">
<h2>How do you enjoy your coffee?</h2>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 text-center">
<div>
<input type="checkbox" name="site" id="so" />
<label for="so">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Espresso</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 brewed text-center">
<div>
<input type="checkbox" name="site" id="sf" />
<label for="sf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Brewed</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
</div>
<!-- Step 1.5 -->
<div class="ifBrewed">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="ba" />
<label for="ba">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Drip coffee</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bb" />
<label for="bb">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Aeropress</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bc" />
<label for="bc">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>French press</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bd" />
<label for="bd">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Vacuum pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 2 -->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="be" />
<label for="be">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Syphon</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bf" />
<label for="bf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>V60</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bg" />
<label for="bg">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Chemex</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bh" />
<label for="bh">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Moka pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 3 -->
<div class="row">
<div class="col-lg-3 col-md-3"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bi" />
<label for="bi">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Percolato</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bj" />
<label for="bj">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Eva solo</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3"></div>
</div>
</div>
</div>
I did like other threads said, Add the display:none feature, and I did try on both CSS and JQuery .css().
It's going well, but I need help with this little bug.
As you can see, when you click the Slide toggle input it toggles then toggles back, but I want it to stay without toggling off until I click it again.
How do I do that?
Thank you!

I think this has something to do with the label. When you click on the .brewed div the labels click event is also being triggered. I think this is making jquery think that 2 click events have occurred.
I have just added e.preventDefault() which prevents any default element click behavior from occurring. I did notice that even without my added code the checkboxes are not being checked on click. This is because they have display none set. Having display none on the checkboxes will also mean they will not be posted if they are part of a form submission. I am not sure if that is in issue for you.
$(document).ready(function(){
var speed = 500;
$('.brewed').click(function(e){
e.preventDefault();
$('.ifBrewed').slideToggle(speed);
});
});
html,
body {
background-color: black;
color: white;
}
input[type=checkbox] {
display: none;
}
.step_1,
.step_2,
.step_3 {
padding: 2%;
margin: 0 auto;
font-weight: 100;
}
input[type=checkbox]:checked+label {
border: 3px solid white;
}
.ifBrewed {
background-color: #181818;
padding: 2%;
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!-- Step 1 -->
<div class="row">
<h2>How do you enjoy your coffee?</h2>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 text-center">
<div>
<input type="checkbox" name="site" id="so" />
<label for="so">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Espresso</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 brewed text-center">
<div>
<input type="checkbox" name="site" id="sf" />
<label for="sf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Brewed</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
</div>
<!-- Step 1.5 -->
<div class="ifBrewed">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="ba" />
<label for="ba">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Drip coffee</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bb" />
<label for="bb">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Aeropress</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bc" />
<label for="bc">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>French press</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bd" />
<label for="bd">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Vacuum pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 2 -->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="be" />
<label for="be">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Syphon</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bf" />
<label for="bf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>V60</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bg" />
<label for="bg">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Chemex</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bh" />
<label for="bh">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Moka pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 3 -->
<div class="row">
<div class="col-lg-3 col-md-3"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bi" />
<label for="bi">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Percolato</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bj" />
<label for="bj">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Eva solo</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3"></div>
</div>
</div>
</div>

The click event is triggering twice because you've assigned a click event handler on .brewed and that's in an input/label. You need to either re-think the event you want to toggle .ifBrewed or you can just assign another click handler to that label and disable the default action.
$(document).ready(function() {
var speed = 500;
$('label[for="sf"]').on('click',function(e) {
e.preventDefault();
})
$('.brewed').on('click',function(e) {
$(".ifBrewed").slideToggle(speed);
})
});
html,
body {
background-color: black;
color: white;
}
input[type=checkbox] {
display: none;
}
.step_1,
.step_2,
.step_3 {
padding: 2%;
margin: 0 auto;
font-weight: 100;
}
input[type=checkbox]:checked+label {
border: 3px solid white;
}
.ifBrewed {
background-color: #181818;
padding: 2%;
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!-- Step 1 -->
<div class="row">
<h2>How do you enjoy your coffee?</h2>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 text-center">
<div>
<input type="checkbox" name="site" id="so" />
<label for="so">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Espresso</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 brewed text-center">
<div>
<input type="checkbox" name="site" id="sf" />
<label for="sf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Brewed</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
</div>
<!-- Step 1.5 -->
<div class="ifBrewed">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="ba" />
<label for="ba">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Drip coffee</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bb" />
<label for="bb">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Aeropress</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bc" />
<label for="bc">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>French press</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bd" />
<label for="bd">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Vacuum pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 2 -->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="be" />
<label for="be">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Syphon</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bf" />
<label for="bf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>V60</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bg" />
<label for="bg">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Chemex</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bh" />
<label for="bh">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Moka pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 3 -->
<div class="row">
<div class="col-lg-3 col-md-3"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bi" />
<label for="bi">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Percolato</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bj" />
<label for="bj">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Eva solo</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3"></div>
</div>
</div>
</div>

How to add a loop for set of div classes?

These are the set of divs where i want to add the loop on some count.
I have tried jquery and javascript but doesn't work. Please help out.
It takes a count from checkbox and the count is values selected in checkbox the following set of divs need be populated dynamically. I have written a jquery that gets the count as well as the checkbox values.As and when user selects these boxes the set of divs need to be appear as the number of counts.
function arrayValues(item, index)
{
var cd = $("input[name=car_damage]:checked");
var eg = cd.map(function () {return this.value;}).get().join(",");
var temp = new Array();
temp = eg.split(",");
text="";
alert(temp);
//alert(eg);
var ef = cd.size();
alert(ef);
}
Checkbox code:
<hr>
<div class="car_map" id="carmap">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4">
<div class="item">
Front
<input type="checkbox" name="car_damage" value="Front" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Front Wing Left
<input type="checkbox" name="car_damage" value="Front Wing Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Front Wing Right
<input type="checkbox" name="car_damage" value="Front Wing Right"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4">
<div class="item">
Bonnet
<input type="checkbox" name="car_damage" value="Bonnet"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Windscreen
<input type="checkbox" name="car_damage" value="Windscreen"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-5 col-sm-4">
<div class="item">
Front Door Left
<input type="checkbox" name="car_damage" value="Front Door Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Front Door Right
<input type="checkbox" name="car_damage" value="Front Door Right"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Roof
<input type="checkbox" name="car_damage" value="Roof"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Back Door Left
<input type="checkbox" name="car_damage" value="Back Door Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Back Door Right
<input type="checkbox" name="car_damage" value="Back Door Right"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Rear Windscreen
<input type="checkbox" name="car_damage" value="Rear Windscreen"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Rear Left
<input type="checkbox" name="car_damage" value="Rear Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Rear Right
<input type="checkbox" name="car_damage" value="Rear Right"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Rear
<input type="checkbox" name="car_damage" value="Rear"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-custom btn-sm btn-decline center-block" data-scroll="step3">Back</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-custom btn-sm btn-decline center-block">Save For Later</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-sm btn-custom center-block" data-scroll="step5" id="add_trip" onclick="arrayValues()">Continue</div>
</div>
</div>
</div>
<hr>
<div class="col-xs-12 col-sm-6">
<div class="form-label">
Rear
</div>
<div class="photo-picker" id="photo-picker">
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="box photos">
<div class="row">
<div class="col-xs-12">
<h4>Photo Instructions</h4>
</div>
</div>
<div class="photo-sample" id="photo-sample">
<div class="row">
<div class="col-xs-12">
<div class="form-sublabel">
Stand approx. 2m back from the Rear of the vehicle.</div>
<imgsrc="/hfiprojectstorefront/_ui/desktop/common/hfiproject/images/placeholder-photo.png" class="img-responsive center-block" alt="" />
</div>
</div>
</div>
<div class="photo-real" id="photo-real">
<div class="row">
<div class="col-xs-12">
<div class="cont">
<video id="v" class="img-responsive center-block"></video>
<div class="player-buttons" id="take" style="display:none;"></div>
</div>
<canvas id="canvas" style="display:none;"></canvas>
<img src="" id="photo" class="img-responsive center-block" />
</div>
<div class="col-xs-12">
<div class="form-label">
Was this photo taken at the scene?
</div>
</div>
<div class="col-xs-12">
<div class="list-group segmented-control">
<span class="list-group-item half active">
YES
<input type="radio" name="scene_photo" value="YES" checked="checked"/>
</span>
<span class="list-group-item half ">
NO
<input type="radio" name="scene_photo" value="NO"/>
</span>
</div>
</div>
<div class="col-xs-12">
<div class="form-label">
Optional Comment
</div>
</div>
<div class="col-xs-12">
<textarea class="form-control" name="optional" id="optional"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
Delete
</div>
<div class="col-xs-12 col-sm-6">
Save
</div>
</div>
</div>
</div>
</div>
<hr>

It is not clear the solution you are seeking.
However requiring the least amount of work would be creating a function to execute on change and jquery to manipulate your DOM elements not a great solution though if you require state management.
I believe a better solution would be use reactjs where use can create components and utilise jsx.
Or AngularJS frameworks where you can do an ng-repeat or custom directive that takes inputs to display your divs.

It's really not clear what you are trying to populate, but you can generate any DOM element dynamically like this.
fnCreateDOMElement = function(el, num, context) {
var e = document.createElement(el);
for(var i=0; i<num; i++){
document.context.appendChild(e);
}
}
above snippet could be utilized like this.
document.getElementById("populator").addEventListener('change', function(){
//reset contents of container if needed. comment if not needed
document.getElementById('container').innerHTML = "";
var times = this.value;
for(var i=0; i<times; i++) {
var mydiv = document.createElement('div');
var myparag = document.createElement('p');
mydiv.setAttribute('class', 'foo');
myparag.setAttribute('class', 'fooized');
var txt = document.createTextNode('Foo #'+(i+1));
myparag.appendChild(txt);
mydiv.appendChild(myparag);
document.getElementById('container').appendChild(mydiv);
}
});
<div id="container">
</div>
<input type="number" min="0" placeholder="how many?" id="populator">
above functions can be refactored with javascript's default/optional arguments.