I'm trying to create four buttons where four labels appear in a random order:
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>
The labels are stored under the
var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];
Then the code iterates through the choices to stick them in the buttons:
for (var i=0; i<choiceLabels; i++) {
var theID="#quizChoice"+i.toString();
$(theID).text(choiceLabels[i])
};
But the text does not appear on the buttons - they stay empty.
Anybody know why?
Your error is here: i<choiceLabels. choiceLabels is an array, so you have to do i<choiceLabels.length.
var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];
for (var i=0; i<choiceLabels.length; i++) {
var theID="#quizChoice"+i.toString();
$(theID).text(choiceLabels[i])
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>
You are missing the length value in choiceLabels. The iteration should loop through choiceLabels.length:
var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];
for (var i=0; i<choiceLabels.length; i++) {
var theID="#quizChoice"+i.toString();
$(theID).text(choiceLabels[i])
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>
Related
I need to have multiples divs on a page, each one one with 3 buttons that hide and show content inside of each div. The objective is exactly the same in both divs but what is happening is that when i press a button on the first div it also triggers the action on the other divs. How can i fix this? My idea is to have, for example, a unique id per div that allows me to use the same buttons across the page multiples times without having to repeat the JS code.
This is my initial code, and i want to be able to add something that i can use the buttons but only triggers inside the div their in.
Hope someone can point me in the right direction.
$('.descontoBTN').on('click', function () {
$(".pacote div").hide()
$(".desconto").show()
$('.descontoBTN').addClass('active')
$('.mensalidadeBTN').removeClass('active')
$('.tvBTN').removeClass('active')
});
$('.mensalidadeBTN').on('click', function () {
$(".pacote div").hide()
$(".mensalidade").show()
$('.descontoBTN').removeClass('active')
$('.mensalidadeBTN').addClass('active')
$('.tvBTN').removeClass('active')
});
$('.tvBTN').on('click', function () {
$(".pacote div").hide()
$(".tv").show()
$('.descontoBTN').removeClass('active')
$('.mensalidadeBTN').removeClass('active')
$('.tvBTN').addClass('active')
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12" id="pack1">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€99,99/mês</del></h6>
<h3>€93,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>1 Mensalidade</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
<div class="col-12" id="pack2">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€89,99/mês</del></h6>
<h3>€83,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>2 Mensalidade</h6>
<h3>€195,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€295,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
<div class="col-12" id="pack3">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€199,99/mês</del></h6>
<h3>€193,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>1 Mensalidade</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
</div>
</div>
You can reduce the amount of repeated code by creating an eventHandler to handle all button clicks.
Updated
I have adjusted the demo to use the HTML added to the question. I am not sure if I have capture all your requirements but the amount of code duplication has been reduced.
See demo below
$('.ofertas button').on('click', function() {
// find closest parent 'group'
let columnGroupElementId = $(this).closest('div.col-12').attr('id');
let elementIdSelector = '#' + columnGroupElementId
// hide all .pacote divs within it
$(elementIdSelector).find(".pacote div").hide();
// remove class from all buttons in it
// the line below may or may not be needed, I am not sure of your requirements
$(this).closest(".ofertas").find('button').removeClass('active');
$(this).addClass('active');
// get a list of classes for selected button
var classList = $(this).attr('class').split(/\s+/);
var classNameToShow = '';
// get the value of the class name that ends with BTN and use it as the class name to show
$.each(classList, function(index, item) {
var indexOfBtn = item.indexOf('BTN');
if (indexOfBtn >= 0) {
classNameToShow = item.substring(0, indexOfBtn);
//console.log('-'+classNameToShow+'-');
}
});
// show only the child of the selected one
$(elementIdSelector).find("div." + classNameToShow).show();
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12" id="pack1">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€99,99/mês</del></h6>
<h3>€93,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>1 Mensalidade</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN" data-value="desconto">
Desconto €3/mês
</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN" data-value="mensalidade">
1 Mensalidade
</button>
<button type="button" class="btn btn-dark w-100 tvBTN" data-value="tv">
TV 32"
</button>
</div>
</div>
</div>
<div class="col-12" id="pack2">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€89,99/mês</del></h6>
<h3>€83,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>2 Mensalidade</h6>
<h3>€195,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€295,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
<div class="col-12" id="pack3">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€199,99/mês</del></h6>
<h3>€193,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>1 Mensalidade</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
</div>
</div>
You need to leverage $(this). This is just a basic example of usage:
$('.myButtonClass').on('click', function(){
$('.myButtonClass').not(this).hide()
$(this).parent().find('.otherTargetedClass').addClass('active')
$(this).siblings().fadeOut('slow')
$(this).parent().show()
})
Also, it looks like you are using the id attribute the same as the class attribute. Id's are unique and there should never be duplicates of the same id on a page. Classes can be used multiple times on a page.
I have 4 divs that each have a button , when a button on div is clicked it should hide that div. Then there is button at top called show all which will show all hidden divs again below is all the code show button , JS script and the four div boxes which should hide when button clicked on them and show all boxes again when show button is clicked
<button type="button" class="btn btn-light btn-sm mt-3" id="show"><i class="fe fe-eye"></i> Show all</button>
<script type = "text/javascript" >
function show(elementId) {
document.getElementById("id1").style.display = "none";
document.getElementById("id2").style.display = "none";
document.getElementById("id3").style.display = "none";
document.getElementById("id4").style.display = "none";
document.getElementById(elementId).style.display = "block";
}
</script>
<div class="card project-card" id="id1">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
<div class="card project-card" id="id2">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
<div class="card project-card" id="id3">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
<div class="card project-card" id="id4">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
Simply set div's display to either block or none to hide it.
let show = document.getElementById('show-button');
let divs = document.getElementsByName('container');
let hideButtons = document.getElementsByName('hide-button');
show.onclick = () => {
divs.forEach((d) => d.style.display='block');
}
hideButtons.forEach((b) => {
b.style.display='block';
b.onclick = () => b.parentNode.style.display='none';
});
<button id='show-button'>Show</button>
<div name='container'>
<button name='hide-button'>Hide 1</button>
</div>
<div name=container>
<button name='hide-button'>Hide 2</button>
</div>
<div name=container>
<button name='hide-button'>Hide 3</button>
</div>
<div name=container>
<button name='hide-button'>Hide 4</button>
</div>
Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5. I want it in exact circular shape. Friends, can you please fix it. Please try to help me I want it in responsive too. Below is my code kindly go through it. Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5.
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Product
identification</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Front ending <br> end customers</i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="" style="font-size:17px;"><b>ZRPL</b></i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Enhance product <br> visibility and deals</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Returns and ARB management</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Logistical
support</i></button>
</div>
</div>
</div>
Add this css style in your button. It will make a circular shape on you button. you can give any width and height value on your button. just make sure that height and width should have same value.
width:170px;
height:170px;
border-radius:50%
I am having some trouble in clearing file contents when file upload is done via Ajax.Below is my modal popup html code,
<div class="modal-header bg-blue">
<div class="desktop_view">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"id="myModalLabel">Upload Document</h4>
</div>
<div class="mobile_view">
<button type="button" class="btn btn-default btn-xs pull-right bold" data-dismiss="modal">Close</button>
<h4 class="modal-title"id="myModalLabel">Upload Document</h4>
</div>
</div>
<div class="modal-body">
<div class="upload-container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="form-group fileinput-button">
<label class="col-lg-6 col-md-6 col-sm-6 col-xs-12 control-label">Select Your Document:</label>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"><input type="file" multiple name="file[]" accept="image/*" id="files" ></div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="preview-container">
<div class="col-lg-12">
<div class="clearfix"></div>
<div id="dvPreview" class="preview-container"></div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" value="Upload" class = "btn btn-info" id= "save" />
<button type="button" class="btn btn-danger myclose" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
After submitting the form,the previous image content still exists.I have tried below methods.
$('#myModalone').find('form')[0].reset();
$(function () {
// Delegating to `document` just in case.
$(document).on("hidden.bs.modal", "#myModalone", function () {
//$('.modal-body').find('input').val('');
$(this).removeData('bs.modal');
});
});
It doesn't works.Please provide a solution.
Give an id to the form and call form reset function as:
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
Also you can use js as:
document.getElementById('formId').reset();
To reset a div:
$('#div_id input[type="text"]').val('');
$('#div_id input[type="file"]').val('');
Find the working fiddle here:
http://jsfiddle.net/Safoora/Car52/174/
I have wrote a jQuery to change the button colour to red when some one clicks on it. But that is only work with the first panel but its not working for the rest of the panels. In the first set of button it works but not only for everything. This is the jQuery part.
function DurationOnClick(element){
var buttonId = element.id;
var buttonName = element.name;
var buttonIds = ["1Hour", "30Min", "1Day" , "1Week", "1Month"];
var chartType = $('#chartType').val();
var idValue = $('#IdValue').val();
//after user click the option here we are changing the option black to red.
$(buttonIds).each(function(i, e) {
$('#'+e+'[name='+buttonName+']').css("color", "");
});
$('#'+buttonId+'[name='+buttonName+']').css("color", "Blue"); `
The html code is like this :
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="LoadAverage" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
After removing the first panel the colour changing will happen for the next immediate chart but the charts below that one the changing colour is not happening. Any help to figure out the issue will be really appreciated.
Please use the below code. This will work perfect with your case:-
function DurationOnClick(ref) {
var buttonName = $(ref).attr("name");
$("button[name=" + buttonName + "]").each(function () {
$(this).css("color", "");
});
$(ref).css("color", "Blue");
}
As already explained the problem is you have duplicate IDs, the id-selector will select only the first element with the id so your code will always select the first set of elements.
But a more jQuery-ish solution will be use jQuery event handlers along with class(duration) to group them like
$('button.duration').click(function() {
$(this).addClass('selected').siblings('.selected').removeClass('selected');
})
.btn.btn-default.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="MemoryConsumption" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="LoadAverage" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
You have duplicated ID. Your code is ok, but you did it wrong.
id attribute is considered unique.
classattribute is considered multiple.
You have put several same id, but CSS and JS are looking only for ONE, so they process the first (only) and leave.
Change id to class.
Example: class="30mins" will turn redall the "30mins" buttons.
Do it for every group you want to turn red on click.
You should not have duplicate ID in the HTML form. Consider using the first set of IDs only.
Apparently you cant have numbers as the first character of an ID or class for your css to apply. If you#re applying style to your 30min 1hour etc, you should consider renaming them. I'm not sure if this conflicts with JS as well. See this example:
<div class="char">char</div>
<div class="char1">char1</div>
<div class="1char">1char</div>
<div class="1111">1111</div>
JSFiddle