Develop Reference

Remove class from all div except the other two divs

I need help whenever i click on div with .clickable class .bg-color class will be added to span.aa and span.aaa and when i select option any other option like c other from other option .bg-color class will be removed i tried many other methods but its not working kindly help me get through this
$('.clickable').on('click',function(){
$('.aa .aaa').removeClass('bg-color');
$(this).addClass('bg-color');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="div input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class=" aa input-group-text bor-clr" id="basic-addon1">A</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Full time</span>
</div>
</div>
<div class="input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class="aa input-group-text bor-clr" id="basic-addon1">B</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Part Time</span>
</div>
</div>
<div class="input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class="aa input-group-text bor-clr" id="basic-addon1">C</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Pinch</span>
</div>
</div>
<div class="input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class="aa input-group-text bor-clr" id="basic-addon1">D</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Weekend Worrior</span>
</div>
</div>
</div>
</div>

You are selecting elements which each has multiple classes, it must be selecting elements which each has one of these classes. Below is a worked solution
$('.clickable').on('click', function() {
$('.aa, .aaa').removeClass('bg-color')
$(this)
.parent()
.find('.aa, .aaa')
.addClass('bg-color')
})

jquery.inputmask.bundle.min.js is not loading correctly via Webjar?

I'm a bit new to coding. My question is the same as the title.
I'm working on javaEE web project in my pom.xml I have this.
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.30</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery.inputmask</artifactId>
<version>3.3.1</version>
</dependency>
and in my layout.html I loaded all my js paths like this :
<!-- jQuery -->
<script src="/webjars/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="/webjars/fastclick/fastclick.js"></script>
<!-- NProgress -->
<script src="/webjars/nprogress/nprogress.js"></script>
<!-- jquery.inputmask -->
<script src="/webjars/jquery.inputmask/min/jquery.inputmask.bundle.min.js">
</script>
<!-- Custom Theme Scripts -->
<script src="/js/custom.min.js"></script>
everything is working fine except jquery.inputmask, it's not working no effect on my input text (no masking no mouseover event). Why?
thank you for trying to help me there is an image from console as you askedClick me for image
here is the code when im using it but the input text is not changing acting like a regular input text no masking no mouseover event and also im using thymeleaf as template engine to view the page.
<!-- form input mask -->
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Input Mask</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up">
</i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-expanded="false"><i
class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li>Settings 1
</li>
<li>Settings 2
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<br />
<form class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-
3">Date Mask</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<input type="text" class="form-control" data-
inputmask="'mask': '99/99/9999'">
<span class="fa fa-user form-control-feedback right"
aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-
3">Phone mask</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<input type="text" class="form-control" data-
inputmask="'mask' : '(999) 999-9999'">
<span class="fa fa-user form-control-feedback right"
aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-
3">Custom Mask</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<input type="text" class="form-control" data-
inputmask="'mask': '99-999999'">
<span class="fa fa-user form-control-feedback right"
aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-
3">Serial Number</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<input type="text" class="form-control" data-
inputmask="'mask' : '****-****-****-****-****-***'">
<span class="fa fa-user form-control-feedback right"
aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-
3">TaxID Mask</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<input type="text" class="form-control" data-
inputmask="'mask' : '99-99999999'">
<span class="fa fa-user form-control-feedback right"
aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-
3">Credit Card Mask</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<input type="text" class="form-control" data-
inputmask="'mask' : '9999-9999-9999-9999'">
<span class="fa fa-user form-control-feedback right"
aria-hidden="true"></span>
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" class="btn btn-
primary">Cancel</button>
<button type="submit" class="btn btn-
success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /form input mask -->
Finally thank you all ,
Thank you very much , i got help from the plugin owner
For the people wondering as NiK648 said below just add the inputmask in the pom.xml file
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>inputmask</artifactId>
<version>3.3.11</version>
</dependency>
and this line in js part
<script src="/webjars/inputmask/inputmask/bindings/inputmask.binding.js"></script>

How to print only specific class value

I have 3 div's in a View. Every div has unique single_value. so when i click on any of that it should alert that data value. For that i used the following script
$(document).on('click','.single_school',function(){
var school = $( ".single_school" ).attr('data-value');
alert(school)
});
But the problem is i'm only getting the first value whatever div I clicked on. How do i print only the specific div I clicked on.
Here is the View:
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="1">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="school_info">
<p class="school_name">ABC</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="2">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="school_info">
<p class="school_name">XYZ</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="3">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="school_info">
<p class="school_name">PQR</p>
</div>
</div>
</div>

$(document).on('click','.single_school',function(){
var school = $(this).attr('data-value');
alert(school)
});

You should use JQuery data() to fetch the value when clicked on the element. And secondly you should use $(this) to get the current element value and not the classname. In your code, it would always give one result because you are using $( ".single_school" ). This should be replaced with $(this):
$(document).on('click', '.single_school', function() {
var school = $(this).data('value');
alert(school)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="1">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="food_info">
<p class="school_name">ABC</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="2">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="food_info">
<p class="school_name">XYZ</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="3">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="food_info">
<p class="school_name">PQR</p>
</div>
</div>
</div>

HTML - Show/Hide Buttons on Bootstrap Panel collapse/expand

I'm using a Bootstrap collapsible panel.
Here's the Fidle for it
I'm trying to do the following :
I want to move both the buttons on the Panel header(at the extreme
right end) i.e. exactly opposite to the text "Panel"
But I only want the buttons to be visible when the panel is expanded. And
when the panel is hidden the buttons should be hidden too.
How can I achieve this. What would be the JS for it?
I tried to do the following in JS:
$(document).ready(function () {
$("#btnSearch").hide();
$(".panel-title").click(function () {
$("#btnSearch").show();
});
});
But with this the buttons won't hide when the panel is made to hide.

Try this. I moved your buttons to panel-heading itself and positioned them using position:absolute;.
It is very similar to this bootsnipp
$(".panel-success").on('show.bs.collapse', function() {
$('.buttonCon').addClass('vis');
}).on('hide.bs.collapse', function() {
$('.buttonCon').removeClass('vis');
})
.panel{
position:relative;
}
.buttonCon{
position:absolute;
top:5px;
right:10px;
display:none;
}
.buttonCon.vis{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-success">
<div class="buttonCon">
<button type="button" class="btn btn-primary" onclick="ReloadData()">
Button1
<span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
<button type="reset" class="btn btn-warning" id="clearAll" data-toggle="tooltip" title="btn2">
Buttonn2
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
<div class="panel-title">
<span class="glyphicon glyphicon-expand"></span> Panel
</div>
</div>
<div class="panel-body collapse" id="body">
<div class="form-group row">
<label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt1" />
</div>
<label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt2" />
</div>
<label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt3" />
</div>
</div>
<div class="form-group row" style="margin-left:auto;margin-right:auto;">
<div class="col-md-2 col-md-offset-5">
</div>
</div>
</div>
</div>
</div>

You can use bootstrap collapse events to achieve it.
$('#accordion').on('shown.bs.collapse', function() {
$(".buttons").show();
})
$('#accordion').on('hidden.bs.collapse', function() {
$(".buttons").hide();
})
Check this fiddle.

The following JsFiddle is another option compared to the answers already given.
Mainly, it prevents the use of position: absolute which can result in a mish-mash of bad things happening. The following jQuery (which is readily available since you are using bootstrap) will work:
$("#js-panel").on('show.bs.collapse', function() {
$('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
$('.js-toggle-btn').addClass('hide');
})
Take note that there are events to track whether a panel is currently opening or closing (plus two others), which can be found here.
I would also suggest that you take the time to read some of the documentation/examples found on the bootstrap webpage, only because a lot of your css/html is pretty rough/unnecessarily complex.

Got it working by combining the answers provided by #kittyCat (the updated solution) and #BuddhistBeast .
Here's the Fiddle.
HTML code :
<div class="container">
<div class="panel panel-success" id="js-panel">
<div class="panelButtons">
<button type="reset" class="js-toggle-btn btn-warning pull-right btn-xs hide" id="clearAll" data-toggle="tooltip" title="btn2" style="margin-left:5px;">
Button2
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="js-toggle-btn btn btn-primary pull-right btn-xs hide" onclick="ReloadData()">
Button1
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
<div class="panel-title">
<span class="glyphicon glyphicon-expand"></span> Panel
</div>
</div>
<div class="panel-body collapse" id="body">
<div class="form-group row">
<label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt1" />
</div>
<label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt2" />
</div>
<label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt3" />
</div>
</div>
</div>
</div>
</div>
JS Code :
$("#js-panel").on('show.bs.collapse', function() {
$('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
$('.js-toggle-btn').addClass('hide');
})

Toggle Disabled to Unable Text Fields in Sections

I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!

You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/