We Keep Coding

i have a problem with JS function that doesn't change html class

I'm new with JS and html, So please go easy on me.
I made a registration form that contains multiple steps.
I have two button in two different form. next form button and back button. next button works perfectly and it changes html id base on what I needed. but the back button which is exactly like previous one doesn't work. Why?
I want that JS functions changes html class.
function backPageFunction() {
document.querySelector(".containerform1").id = 'containerform1';
document.querySelector(".containerform2").id = 'containerform2'
document.getElementById('progress-step1').style.width = '250px';
document.querySelector('.step-col2').style.fontSize = '15px';
document.querySelector('.step-col1').style.fontSize = '18px';
document.querySelector('.step-col1').style.color = '#f0eaea';
document.querySelector('.step-col2').style.color = '#546E7A';
};
function nextPageFunction() {
// containerform1.id='secActive1';
document.querySelector(".containerform1").id = 'secActive1';
document.querySelector(".containerform2").id = 'secActive2';
// containerform2.id='secActive2';
document.getElementById('progress-step1').style.width = '470px';
document.querySelector('.step-col1').style.fontSize = '15px';
document.querySelector('.step-col2').style.fontSize = '18px';
document.querySelector('.step-col2').style.color = '#f0eaea';
document.querySelector('.step-col1').style.color = '#546E7A';
};
#secActive1 {
width: 982px;
height: 600px;
position: relative;
margin: 40px auto;
border: 1px solid #cfd8dc;
background: #eceff1;
border-radius: 5px;
position: absolute;
opacity: 0 !important;
pointer-events: none;
transform: translateX(100%);
transition: 1s;
}
#secActive2 {
width: 982px;
height: 270px;
position: relative;
margin: 40px auto;
border: 1px solid #cfd8dc;
background: #eceff1;
border-radius: 5px;
position: absolute;
opacity: 1 !important;
transform: translateX(0%);
transition: 1s;
}
#containerform1 {
width: 982px;
height: 600px;
position: relative;
margin: 40px auto;
border: 1px solid #cfd8dc;
background: #eceff1;
border-radius: 5px;
position: absolute;
opacity: 1;
transition: 1s;
}
#containerform2 {
width: 982px;
height: 270px;
position: relative;
margin: 40px auto;
border: 1px solid #cfd8dc;
background: #eceff1;
border-radius: 5px;
position: absolute;
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
transition: 1s;
}
<div class="next-btn-box">
<button class="nextbtnform1" id="nextbtnform1" onclick="nextPageFunction()">ثبت اطلاعات و ادامه </button>
</div>
</fieldset>
</form>
</div>
<div id="containerform2" class="containerform2">
<form id="Form2" class="Form2">
<fieldset id="Form2">
<legend class="form-title">مشخصات حرفه‌ای و شغلی</legend>
<div class="form_row three_column clearfix">
<div>
<label>سطح تحصیلات</label>
<span class="star">*</span>
<select id="edu" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty" name="edu" valid-directive="isEmpty">
<option label="دیپلم و پایینتر" value="number:100" selected="selected">دیپلم و پایینتر</option>
<option label="فوق دیپلم" value="number:101">فوق دیپلم</option>
<option label="کارشناسی" value="number:102">کارشناسی</option>
<option label="کارشناسی ارشد" value="number:103">کارشناسی ارشد</option>
<option label="دکتری و بالاتر" value="number:104">دکتری و بالاتر</option>
</select>
</div>
<div>
<label>رشته تحصیلی</label>
<span class="star">*</span>
<input id="degree">
</div>
<div>
<label>دانشگاه محل تحصیل</label>
<span class="star">*</span>
<input id="college" name="college" valid-directive="isEmpty,isPersianAlphaWithoutNumber,isInAlphabet([2#50])">
</div>
</div>
</fieldset>
<fieldset class="clearfix moshakhasat_canoon ng-scope">
<div class="next-btn-box">
<button class="backbtnform2" id="backbtnform2" onclick='backPageFunction()'>بازگشت و ویرایش اطلاعات</button>

Hi so I you want to change classes of elements try this:
1) Change id's to classes in css:
like .secActive1, .secActive2 etc.
2) JS:
function changeClasses(){
document.querySelector(".containerform1").classList.add('secActive1');
document.querySelector(".containerform1").classList.add('secActive2');
}
Don't forget to remove them when other button is clicked:
function changeClassesBack(){
document.querySelector(".containerform1").classList.remove('secActive1');
document.querySelector(".containerform1").classList.remove('secActive2');
}
Hope it helps

Adding/removing checkmark to different inputs with a limit

I have three options and if you click on an option a checkmark shows over it, representing the option as selected. I have a limit of 1 set. As of now, the image/current checkmark input needs to be clicked again to remove it, rather than simply being able to click on another option and removing it.
I tried to setup a snippet that replicates what I actually have, but the checkmark isn't showing for some reason. Regardless, I am attempting to incorporate a solution I saw from another post with this: $('').not(this).prop('checked', false);.
I am not sure how to add it to my code to get it to work though. I have tried:
$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked).not(this).prop('checked', false);
and
$(this).parents('.product-wrap:first').find('.checkmark-img').not(this).prop('checked', false).fadeBoolToggle(this.checked);
Does anyone know how I can get the checkmark inputs to switch when clicking another checkmark input option?
This is the block of code that it is associated with.
$('.calendar-check').on('change', function () {
// $('').not(this).prop('checked', false);
if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
//For checkmark
jQuery.fn.fadeBoolToggle = function (bool) {
return bool ? this.fadeIn(400) : this.fadeOut(400);
}
$('.calendar-check').on('change', function () {
// $('input.example').not(this).prop('checked', false);
if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
}
});
.product-check, .calendar-check {
display: none;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
.product-wrap {
width: 100%;
position: relative;
display: block;
}
.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 1;
cursor: pointer;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
}
#calendar-box-wrap, #tp-package-wrap {
margin: 50px 0;
}
.calendar-box, .tp-package {
display: inline-block;
vertical-align: top;
width: 25%;
margin: 0 4%;
position: relative;
}
.option-input {
border: 1px solid #CDCDCD;
padding: 10px;
color: #303030;
font-size: 1.2em;
}
/*- Calendar -*/
.calendar-selection-img {
width: 70%;
height: auto;
cursor: pointer;
margin: 0 auto;
display: block;
}
/*- Calendar Preview Section -*/
#pg-preview-input-section, #pg-preview-img-section {
display: inline-block;
vertical-align: top;
}
#pg-preview-input-section {
width: 45%;
}
#pg-preview-img-section {
width: 55%;
}
#calender-preview-choice {
margin-top: 50px;
font-weight: bold;
}
.pg-preview-img {
width: 35%;
height: auto;
margin-left: 15%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-box">
<div class="product-wrap">
<label for="cal-2year" class="package-check-toggle">
<h4 class="calendar-box-title">A</h4>
<img src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/c/v/cv106.jpg"
alt="A" class="calendar-selection-img">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check">
</div>
</div>
<div class="calendar-box">
<div class="product-wrap">
<label for="cal-whiteboard" class="package-check-toggle">
<h4 class="calendar-box-title">B</h4>
<img src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/c/v/cv106.jpg"
alt="B" class="calendar-selection-img">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check">
</div>
</div>
<div class="calendar-box">
<div class="product-wrap">
<label for="cal-glance" class="package-check-toggle">
<h4 class="calendar-box-title">C</h4>
<img src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/c/v/cv106.jpg"
alt="C" class="calendar-selection-img">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check">
</div>
</div>

If you are trying to have only one checkbox selected you need to add a name (if you want to use radio this works else you need jQuery for checkbox ) that is the same in each input field:
<div>
<input name="checkMark" type="checkbox" />
</div>
<div>
<input name="checkMark" type="checkbox" />
</div>
<div>
<input name="checkMark" type="checkbox" />
</div>
If you are using this code to have only one checkbox checked, then delete this code:
$('.calendar-check').on('change', function () {
// $('').not(this).prop('checked', false);
if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
}
});
and add this one:
$('input.calendar-check').on('click', function(){
$('input.calendar-check').not(this).attr('checked', false);
})
https://jsfiddle.net/e854ao30/2/
Basically you're saying whichever one you click, the rest of the inputs will be checked false.

How can I add text to a text area at the bottom right of the text area?

I want to show the user how many allowable characters they have left to type, and I would like to place this within the text area, at the bottom right, after a new line; refreshing it after the textarea has changed in anyway. I just need help on placing it in said position.

function countChar(val){
var len = val.value.length;
if (len >= 50) {
val.value = val.value.substring(0, 50);
} else {
$('#charNum').text(50 - len);
}
};
.main{
position: relative;
display: inline-block;
}
.main textarea{
height: 100px;
width: 100px;
resize: none;
}
.main span{
color: coral;
position: absolute;
bottom: 5px;
right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<textarea class="textareatest" onkeyup="countChar(this);"></textarea>
<span id="charNum">50</span>
</div>

You can do someting like this:
<div class="form-block">
<textarea></textarea>
<div class="label"></div>
</div>
And in CSS:
.form-block {
position: relative;
}
.label {
bottom: 5px;
position: absolute;
right: 5px;
}

It can be achieved with something like this.
function count(){
document.getElementById('textarea').onkeyup = function () {
document.getElementById('count').innerHTML = this.value.length;
};
}
.main{
position: relative;
display: inline-block;
}
.main textarea{
height: 100px;
width: 200px;
resize: none;
}
.main span{
color: coral;
position: absolute;
bottom: 5px;
right: 5px;
}
<div class="main">
<textarea id="textarea" onclick="count()"></textarea>
<span id="count">0</span>
</div>

Made This using bootstrap and jquery.
<div style="margin-top:45px; margin-left:45px">
<form>
<div class='row'>
<div class='col-sm-3'>
<div class='textCountContianer'>
<label>Some Text</label>
<div class="count">0/250</div>
<textarea class='form-control' type="text" maxlength="250"></textarea>
</div>
</div>
</div>
</form>
</div>
CSS
.count{
position: absolute;
bottom: 1px;
right: 10px;
color:gray
}
.textCountContianer{
position: relative;
}
JQUERY
$('textarea').keyup(function(e) {
var textlen = $(this).attr('maxlength') - $(this).val().length;
$(this).parent().find('.count').html('<span>'+$(this).val().length+'/'+$(this).attr('maxlength')+'</span>');
});
Demo
https://codepen.io/badevellis/pen/mdwWXLq

Showing/hiding <div> with JavaScript

I wrote simple JavaScript to show hidden <div> after clicking another <div>. Everything works fine however when clicking checkbox in that <div> the hidden one appears and hides instantly.
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
.divCell {
width: 500px;
height: 35px;
margin: 2px 0;
display: inline-block;
background-color: #D4F78F;
}
.checkbox_div {
width: 25px;
position: relative;
margin: 5px;
float: left;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
width: 25px;
height: 25px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background-color: white;
border-radius: 4px;
}
.div_name_divcell {
line-height: 35px;
width: auto;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="divCell" id="click1">
<div class="checkbox_div">
<input type="checkbox" id="checkbox1">
<label for="checkbox1"><span></span>
</label>
</div>
<div class="div_name_divcell">Name1</div>
</div>
<div id="hidden1" style="display: none;">
hidden text
</div>
Fiddle:
https://jsfiddle.net/mamzj4tw/

Add event.preventdefault to your code
$(document).ready(function() {
$('#click1').click(function(event) {
event.preventDefault();
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
Here is the Fiddle: https://jsfiddle.net/mamzj4tw/1/

You can use just return false;
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
return false;
});
});
https://jsfiddle.net/shadiq_aust/m91wf79y/1/

How to make a overlay fit in another image

I currently have working system where you check the checkboxes it overlays the image however, the problem I am having is getting the image postioned inside the computer screen so it's not on the very edge. Cany Anyone help with this?
<html><head>
<style>
.overlay {
display: none;
position: absolute;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border:3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
right: -780px;
width: 452px;
height: 344px;
background: url(BLANK-COMPUTER-SCREEN.png);
}
#station_A { top: 5px; left: 85px }
#station_B { top: 150px; left: 180px }
.hover { color: green }
</style>
<div id="map" >
<span id="station_A" class="overlay"><img style="background:url(/BLANK-COMPUTER-SCREEN.PNG)" src="/tn_WhiskersPrinceworkup.png" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<h2>Choose a Shirt</h2>
<form>
<input type="checkbox" name="image" value="station_A">Station Alfa<br>
<input type="checkbox" name="image" value="station_B">Station Beta
<input type="checkbox" name="image" value="bandanna" id="checkbox1">Bandanna
</form>
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("input[type='checkbox']").change(function () {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#checkbox1').change(function () {
if (this.checked) $('#map').fadeIn('slow');
else $('#map').fadeOut('slow');
});
});
</script>
Fiddle is here.

you need to set the position:absolute to your #station_A and #station_b instead of .overlay, because you use .overlay to toggle in jQuery, so it will loose the property.
here is a snippet:
$(document).ready(function() {
$("input[type='checkbox']").change(function() {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#checkbox1').change(function() {
if (this.checked) $('#map').fadeIn('slow');
else $('#map').fadeOut('slow');
});
});
.overlay {
display: none;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
/*right: -780px; removed for demo purposes */
width: 452px;
height: 344px;
background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png) no-repeat;
}
#station_A {
top: 8%; /* whatever you like */
left: 5%; /* whatever you like */
position: absolute;
}
#station_B {
top: 45%; /* whatever you like */
left: 15%; /* whatever you like */
position: absolute
}
.hover {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="map">
<span id="station_A" class="overlay"><img style="background:url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png)" src="//lorempixel.com/270/240" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<h2>Choose a Shirt</h2>
<form>
<input type="checkbox" name="image" value="station_A">Station Alfa
<br>
<input type="checkbox" name="image" value="station_B">Station Beta
<input type="checkbox" name="image" value="bandanna" id="checkbox1" />Bandanna
</form>
</p>

The issue was due to a z-index problem I moved the image to the front and the button works fine now after this css change.
#VneckTshirtImage
{
left: 138px;
top: 457px;
position: absolute;
width: 118px;
height: 174px;
z-index:28;
}