We Keep Coding

How can i put a form inside a div and see question by questions

i have a form with 13 questions but i would like to put it inside a small div, so i can see first the question 1, with an right arrow go to question 2, then to question 3. With a left arrow go back to last question.
I am new with this so i would appreciate your help. Thanks
This is a piece of my form and my sad try
Iam using back-1 back-2 to exchange background images
$(".right-arrow").on('click', () => {
$("#interview-map").attr("hidden", "")
$(".titulo").attr("hidden", "")
$(".fuentestyle").removeAttr('hidden')
$(".container").removeClass("back-1").addClass("back-2")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container back-1 py-3 h-100">
<div class="location-container col-12">
<label for="inputAddress2" class="titulo form-label">¿Whats your address? </label>
<div id="interview-map" class="row">
<div class="locate">
<p>show my position</p>
<input id="track" type="checkbox" />
</div>
</div>
<img class="right-arrow" src="assets/img/right_arrow.png" alt="">
</div>
<div class="col-md-12">
<form id="form_interview" class="col-lg-12 row g-3 mx-10 my-10">
<div id="interview-address" class="fuentestyle col-12" hidden>
<label for="referencia" class="form-label">Add your address: </label>
<input type="text" class="form-control" id="referencia" placeholder="Reference">
</div>
<div class="mb-3" hidden>
<label for="disabledSelect" class="form-label">¿Question fuente?</label>
<select id="fuente" class="form-select form-select-sm" aria-label=".form-select-sm example">
<option id="fuente-0" selected class="form-control"></option>
<option id="fuente-1" value="1"></option>
<option id="fuente-2" value="2"></option>
<option id="fuente-3" value="3"></option>
<option id="fuente-4" value="4"></option>
</select>
</div>
<div class="mb-3" hidden>
<label for="disabledSelect" class="form-label">Question construido</label>
<select id="construido" class="form-select form-select-sm" aria-label=".form-select-sm example">
<option id="construido-0" selected class="form-control"></option>
<option id="construido-1" value="1"></option>
<option id="construido-2" value="2"></option>
</select>
</div>
<div class="col-12" hidden>
<label for="dias_agua" class="form-label">Question dias_agua </label>
<input type="text" class="form-control" id="dias_agua" placeholder="Enter a number">
</div>
<div class="col-12" hidden>
<label for="horas_agua" class="form-label">Question horas_agua </label>
<input type="text" class="form-control" id="horas_agua" placeholder="Enter a number to 24">
</div>

Personally I would try to make my application more data driven, but if you cannot change the form itself, then you could do something like this...
let index = 1;
function back() {
index--;
update();
}
function next() {
index++;
update();
}
function update() {
// Find all questions
const questions = document.querySelectorAll("[id^='question-']");
// Hide all questions
questions
.forEach(question => {
question.style.display = "none";
});
// Show the active question
const activeQuestion = document.getElementById("question-" + index);
if (activeQuestion != null)
activeQuestion.style.display = "block";
// Hide/Show the buttons according to which question is being shown
document.getElementById("back").style.display = index <= 1 ? "none" : "block";
document.getElementById("next").style.display = index >= questions.length ? "none" : "block";
}
update();
<div id="question-1">Question 1</div>
<div id="question-2">Question 2</div>
<div id="question-3">Question 3</div>
<div id="question-4">Question 4</div>
<div id="question-5">Question 5</div>
<button id="back" onclick="back()">Back</button>
<button id="next" onclick="next()">Next</button>
Note:
The solution above uses native javascript (jQuery is not necessary).
This code could be written more efficiently, for example you don't really have to query for all questions on each update. Instead, you could do this once when the page is loaded.

Hide closest row anchor tag jquery

I have multiple div with class rows and in each row there is a dropdown on change of dropdown i want to hide the anchor tag with class "add_marks" which is inside the same row.
I'm using the following code to hide it:
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row');
var elem = $(nearest_row).closest(".add_marks");
elem.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><i class="material-icons">add</i>Add Marks</div>
</div>
</div>

You have to get the next div and find the a link, then hide it.
var nearest_row = $(this).closest('div.row');
gets you the div.row.clearfix.attr_fields but the link is present in the next div, so doing next gets you the next div element, then you find the 'a' element.
You can also do next('div') instead of getting the next element to find the next div.
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row').next().find('.add_marks').hide();
//console.log(nearest_row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><i class="material-icons">add</i>Add Marks</div>
</div>
</div>

Here is Working code example run it with js (shortcut: ctrl + enter)
...want to hide the anchor tag with class "add_marks" which is inside the same row.
So I have moved that button inside row.
Using .col* as direct child of .row is proper way of using bootstrap grid.
Used the following jQuery considering your requirement.
jQuery(document).on('change', '.subject', function (e) {
$(this)
.parents('.row')
.find('.add_marks')
.hide();
});

javascript - how to fade in div class

I want to fade in a div class when a click action is made. But it's not working.
the picture above is produced by function gotData.
function gotData(data) {
var jobs = data.val();
var keys = Object.keys(jobs);
var container = document.getElementById('Jobcontainer');
var container2 = document.getElementById('jobpackage');
for (var i = 0; i<keys.length; i++) {
var k = keys[i];
var newCard = `
<li class="pos-card" id="Jobcontainer">
<div class="content">
<div class="title">`+jobs[k].JobTitle+`</div>
<div class="date">April 21</div>
<div class="refer">Refer</div>
</div>
<ul class="desc">
<li>`+ jobs[k].JobSummary + `</li>
</ul>
</li>`;
container.innerHTML += newCard;
}
}
in the same file html tag I have this html code
<div class="return">Return to listings </div>
<div class="container refer-card">
<div class="modal confirmed"><span class="close-modal"></span>
<h2>Thank you!</h2>
<p><span id="refer_name" class="focus"></span> has been submitted for the <span id="refer_pos" class="focus"></span> position.</p>
</div>
<div class="sign-up card">
<div class="card__header">
<h1>Employee Referral</h1>
<div class="description">For more information, please consult the employee handbook.</div>
</div>
<div class="card__content">
<form class="referral" method="post">
<div class="field line">
<input class="req" maxlength="240" type="text" name="name" value="" required="required" id="name"/>
<label class="placeholder" for="name">Full Name</label>
</div>
<div class="field line">
<input class="req" maxlength="240" type="email" name="email" value="" required="required" id="email"/>
<label class="placeholder" for="email">Email</label>
</div>
<div class="field line inline">
<input class="req" maxlength="240" type="text" name="position" value="" required="required" id="position"/>
<label class="placeholder" for="position">Position</label>
</div>
<!-- <div class="field inline right"><span class="dropdown-wrapper">
<select class="empty" name="department" id="choice">
<option value="" selected="selected">Department</option>
<option value="1">Development</option>
<option value="2">Sales</option>
<option value="3">QA</option>
<option value="4">Design</option>
<option value="5">HR</option>
<option value="6">Research </option>
</select></span></div> -->
<div>
<input type="submit" value="Submit" disabled="disabled" id="btn"/>
</div><a class="reset" href="#">Reset </a>
</form>
</div>
</div>
</div>
I am attempting to use the JS function below to fade in refer-card in the html tag when "refer" in picture above is clicked but for some unknown reasons nothing is happening and no error is displayed. Can you help figure out what I'm doing wrong or missing?
$('.refer').click(function(e){
e.stopPropagation();
$('.positions').addClass('fadeOut');
$('.refer-card').addClass('show');
$('.return').fadeIn('fast');
});

Try this codepen (http://codepen.io/anon/pen/gmdgmv)
Perhaps you have not defined jQuery, as it seems to work with a sample job block I put in place, and the basic CSS to hide the element you are trying to fade in. Also, bear in mind that if you've hidden it with '!important' in your CSS then the fade in will not work.
I added a console.log('clicked'); to your click handler verify that the block is executing.

It might be because you've called the [gotData] method that would append the html tag with the 'refer' class in play thus by that time, (refer) class didnt register or bind the [click] event handler after loading the DOM
In this case, you need to attach / bind them beforehand using (on) or (delegate) method (If you want to apply this in jQuery)
Using (on) method:
$('.refer').on('click', function(event) {
$('.positions').addClass('fadeOut');
// rest of code
});
Using (delegate) method:
$(document).delegate('.refer', 'click', function(event) {
$('.positions').addClass('fadeOut');
// rest of code
});
Hope this helps for your case.

Delete row using jquery by pressing button

I am writing a code which adds rows dynamically into a cart. Their is delete button in front of every row to delete that row. When the user press button the parent of that button should be grabbed and then implement remove() method to remove that row. But this way its not working for me.. Can anybody tell me where i am doing wrong? Following is my code
<div class="container" id="dynamic">
<div class="row " id="main-row">
<div class="col-sm-1 " id="serial">1</div>
<div class="col-sm-2 ">
<select class="container-fluid">
<option value="1">Computer</option>
<option value="2">Mobile</option>
<option value="3">LCD</option>
<option value="4">Keyboard</option>
<option value="5">Mouse</option>
</select>
</div>
<div class="col-sm-2 "><input class="length" type="number" min="1" name="name" value="" /></div>
<div class="col-sm-2 "><input class="length" type="text" name="text" value="" min="1" /></div>
<div class="col-sm-2"><input class="length" type="text" min="1"/></div>
<button class="btn-primary col-sm-1 del ">Delete</button>
</div>
</div>
<button class="btn btn-primary" id="button1">Add Row</button>
</section>
Here is my jquery code.
//code for adding rows dynamically
var counter = 1;
$(function () {
$("#button1").click(function () {
counter++;
$('#dynamic').append($("#main-row").clone().attr("id",counter-1));
$("#serial").text(counter);
});
});
//code for deleting row
$('.del').click(function () {
$(this).parent().remove();
});

Since you're adding the rows dynamically, you'll need to use a delegated event handler.
Also use this instead of ".del" to avoid deleting all the rows.
$(document).on('click', '.del', function () {
$(this).parent().remove();
});
Otherwise, the new .del objects will not get the the click event.

multiple clone not working when append in select 2

Can anyone please let me know what is wrong with the following code:
HTML
<div class="form-wrapper">
<div class="form-repaet">
<div class="form-group">
<select id="selecttag" name="book[0].tag" class="form-control select2 input-lg" style="width: 100%;">
<option selected="selected">Tag</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<select class="form-control select2" name="book[0].is" style="width: 100%;">
<option selected="selected">is</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<select class="form-control select2 test1" name="book[0].select_tag" style="width: 100%;">
<option selected="selected">Select a Tag</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<div class="btn-group m-r">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
<span class="dropdown-label"><i class="ion-gear-b"></i></span>
</button>
<ul class="dropdown-menu dropdown-select">
<li class="active">
All
</li>
<li>Option2</li>
<li>Option3</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="line line-dashed line-lg pull-in"></div>
</div>
JavaScript I am using following codes for javascript
$(document).ready(function(){
var counter = 1;
$("#add-form").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
$(".form-repaet:last").clone().appendTo(".form-wrapper");
//$(".form-repaet:last").select2();
counter++;
});
$("#removebtn").click(function () {
if(counter==1){
return false;
}
$(".form-repaet").last().remove();
counter--;
});
});
It is creating a clone of 'form-repaet' div but the select box is not working. I've tried select2(); after clone, but it is not working. Any help would be appreciated. Thanks so much!

Here is a working jsFiddle
First of all, add another selector to select2 elements, not select2 because that is attached to the spans what selec2 created. This is why you get that error:
The select2('destroy') method was called on an element that is not using
In my case this is xxx
And use like this:
$(".form-repaet:last").find('.xxx').select2('destroy');
var clone = $(".form-repaet:last").clone();
$('.form-wrapper').append(clone);
$('.xxx').select2();
I did not care about remove.
NOTE
In HTML all ID-s should be unique, so care about it, when you clone.

This worked for me:
before code:
addRecord($(this).closest('.glacc-detail'));
after change code:
$('.select2bs4').select2('destroy'); //added this line
addRecord($(this).closest('.glacc-detail'));
$('.select2bs4').select2(); //added this line