Develop Reference

jquery .last() firing multiple times when clicking last element only once

I have some tabs with radio buttons in them and want to check when the last option is clicked (by that I mean any radio button in the last tab, not the last radio button).
This is my html:
<div id="smartwizard" class="sw-main sw-theme-default">
<ul class="nav nav-tabs step-anchor">
<li class="optietabs nav-item done">
<a href="#step-0" class="nav-link">Lijmlaag
<button class="infotooltip" data-tooltip="lijmlaag is gewoon een dikke laag lijm">
<i class="fas fa-info-circle"></i></button></a>
<div id="step-0" class="" style="display: none;">
<form class="" id="step__form" method="post">
<div class="tab-content2">
<input type="radio" id="Wit-Lijmlaag" name="Lijmlaag" value="Wit(prijsberekening)($m2*4);">
<label for="Wit-Lijmlaag">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Wit">
<p><strong>Wit</strong></p>
</div>
</label>
<input type="radio" id="Grijs-Lijmlaag" name="Lijmlaag" value="Grijs(prijsberekening)($stuksprijs+15);">
<label for="Grijs-Lijmlaag">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Grijs">
<p><strong>Grijs</strong></p>
</div>
</label>
</div>
</form>
</div>
</li>
<li class="optietabs nav-item done">
<a href="#step-1" class="nav-link">Laminaat
<button class="infotooltip" data-tooltip="Test test test test ">
<i class="fas fa-info-circle"></i></button></a>
<div id="step-1" class="" style="display: none;">
<form class="" id="step__form" method="post">
<div class="tab-content2">
<input type="radio" id="Anti-slip laminaat-Laminaat" name="Laminaat" value="Anti-slip laminaat(prijsberekening)($o*5);">
<label for="Anti-slip laminaat-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Anti-slip laminaat">
<p><strong>Anti-slip laminaat</strong></p>
</div>
</label>
<input type="radio" id="Glans laminaat-Laminaat" name="Laminaat" value="Glans laminaat(prijsberekening)($m2*4);">
<label for="Glans laminaat-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Glans laminaat">
<p><strong>Glans laminaat</strong></p>
</div>
</label>
<input type="radio" id="Mat laminaat-Laminaat" name="Laminaat" value="Mat laminaat(prijsberekening)($m2*4);">
<label for="Mat laminaat-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Mat laminaat">
<p><strong>Mat laminaat</strong></p>
</div>
</label>
<input type="radio" id="Geen-Laminaat" name="Laminaat" value="Geen">
<label for="Geen-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Geen">
<p><strong>Geen</strong></p>
</div>
</label>
</div>
</form>
</div>
</li>
<li class="optietabs nav-item active">
Afwerking
<div id="step-2" class="">
<form class="" id="step__form" method="post">
<div class="tab-content2">
<input type="radio" id="Contoursnijden-Afwerking" name="Afwerking" value="Contoursnijden(prijsberekening)($m2*30);">
<label for="Contoursnijden-Afwerking">
<div class="afwerking-tab">
<div class="ribbon ribbon-top-right">
<span>Meest gekozen</span>
</div>
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Contoursnijden">
<p><strong>Contoursnijden</strong></p>
</div>
</label>
<input type="radio" id="Schoonsnijden-Afwerking" name="Afwerking" value="Schoonsnijden">
<label for="Schoonsnijden-Afwerking">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Schoonsnijden">
<p><strong>Schoonsnijden</strong></p>
</div>
</label>
</div>
</form>
</div>
</li>
</ul>
</div>
This is my jquery function:
$("#smartwizard input:radio").on("click", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
var form_data = $("#formsid form").serialize();
$('#formaataantaltab').removeClass('formaataantal-done');
$('#formaataantaltab').addClass('formaataantal');
$.ajax({
type:'post',
url:"catalog/calcdiv.php",
data:({form_data: form_data}),
success:function(data){
var content = $( $.parseHTML(data) );
$( "#ajaxresult" ).empty().append( content );
$('#prijsonder').empty().append($('#prijs').html());
// indicate the ajax has been done, release the next step
$("#smartwizard").smartWizard("next");
}
});
$laatsteopties = $(".optietabs").last();
$($laatsteopties).on("change", function() {
console.log('last option clicked');
});
$(".optietabs").each(function(){
$(this).on("click", function() {
$([document.documentElement, document.body]).animate({
scrollTop: $(this).offset().top
}, 0);
})
});
});
Where this part is logging when a last option is clicked in the console:
$laatsteopties = $(".optietabs").last();
$($laatsteopties).on("change", function() {
console.log('last option clicked');
});
The problem is when I click one radio button, I see the console logging last option clicked multiple times, in this case 3, instead of just one time each radio button click.
Why is that? What am I doing wrong?

You added code $($laatsteopties).on("change", function() {... (1) in block $("#smartwizard input:radio").on("click", function(e, anchorObject, stepNumber, stepDirection, stepPosition) { (2), so code (1) executes three times for each radio button. You need to move code
$laatsteopties = $(".optietabs").last();
$($laatsteopties).on("change", function() {
console.log('last option clicked');
});
out of code block (2).

If Child Category checkbox Selected Then Parent checkbox Should be selected Automatically

I have nested Loop For Parent And Child Category,
Now I want If My Child Is selected Then All Parent Of that Child Category Should Be Selected Automatically.
In My code Only One Parent is checked , So how can i do it.
And also If i Uncheck Child Then, Parent Should Be uncheck Automatically
So is that possible.
Thanks in advance.
Here Is My code,
<label>Product Category:</label>
<div class="wk_field wk_category">
<div class="wk_for_validation">
<div id="wk_category_label">CATEGORIES</div>
<div class="wk_cat_container" style="margin-left:0px;">
<span class="wk_minus"> </span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Gold</span>
<input class="wk_elements" type="checkbox" value="3" name="category[]" id="3">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 20px;">
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Earrings</span>
<input class="wk_elements" type="checkbox" value="27" name="category[]" onclick="checkParent('3', this)">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 20px;">
<span class="wk_minusend"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Rings</span>
<input class="wk_elements" type="checkbox" value="26" name="category[]" onclick="checkParent('3', this)" id="26">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 40px;" >
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Ladies</span>
<input class="wk_elements" type="checkbox" value="37" name="category[]" onclick="checkParent('26', this)">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 40px;">
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Gents</span>
<input class="wk_elements" type="checkbox" value="36" name="category[]" onclick="checkParent('26', this)">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 20px;">
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Bangles</span>
<input class="wk_elements" type="checkbox" value="25" name="category[]" onclick="checkParent('3', this)">
</div>
<script type="text/javascript">
function checkParent(id, ele) {
var parent = document.getElementById(id);
if (ele.checked === true) parent.checked = true;
}
</script>

if I got it right when a child is checked you wanted its parent to be checked, and its parent's parent, and so on till root.
If so, check this fiddle I created.
I removed inline event handlers (onclick), associated a data-parent attribute to each child, and used the attribute to go up the tree in the following reviewed checkParent function:
function checkParent(ele) {
var idparent = ele.getAttribute('data-parent');
if(idparent){
var parent = document.getElementById(idparent);
if (ele.checked === true) parent.checked = true;
checkParent(parent);
}
}
Also, I didn't understand how exactly you wanted child uncheck event to work, you can try and play with jsfiddle to get that, or point it out more clearly to have further help.

How to know that radio button is not checked?

I have simple radio button, using bootstrap like this
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
So what i want really to do is, when i click the radio, the span class is change from btn-danger into btn-success. Of course previous button that has btn-success is would be back into btn-danger again. I try with my javascript code but it wouldn't work out.
$(document).ready(function() {
$("label").click(function() {
if ($(this).children().children().is(":checked")) {
$(this).children().attr("class", "btn btn-success");
} else {
$(this).children().attr("class", "btn btn-danger");
}
});
});
Ok when I click the radio it turned in to green (btn-success), but when i check another radio, it turned in to green but previous radio which i click it, it still green (still has btn-success class). Can someone help me? Thanks :)

You also need to remove/add the proper CSS class from unckecked radio's parent element element.
Also .addClass() and .removeClass() can be used to add and remove the CSS class. Here in the example I have also used .filter()
$(document).ready(function() {
$("label").click(function() {
//Cache elements
var radioElem = $(":radio[name=tipe]");
//Remove the btn-success and add btn-danger class to all the parent element of radio
radioElem.parent().removeClass('btn-success').addClass('btn-danger');
//Filter out checked radio and add/remove the classes
radioElem.filter(":checked").parent().addClass('btn-success').removeClass('btn-danger');
});
});
.btn-danger {
color: red
}
.btn-success {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>

On change of any radio button iterate loop through all the radio buttons and check whether the radio button is checked or not and accordingly made change the classes of the parent div. Please refer the below snippet for more understanding.
$("input[type='radio']").on("change",function(){
$("input[type='radio']").each(function(){
if($(this).is(':checked')){
$(this).parent().removeClass('btn-danger').addClass('btn-success');
}else{
$(this).parent().removeClass('btn-success').addClass('btn-danger');
}
});
});
.btn-danger {
color: red
}
.btn-success {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label for="radio-A">
<span class="btn btn-danger">
<input id="radio-A" type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label for="radio-B">
<span class="btn btn-danger">
<input id="radio-B" type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label for="radio-C">
<span class="btn btn-danger">
<input id="radio-C" type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>

You are only checking the children of the clicked button and set or rest that one. But you have to reset the children of the buttons that have not been clicked in order to make them red again.
You could do something like
$(document).ready(function() {
$("label").click(function() {
$("label").children().attr("class", "btn btn-danger"); // reset all
$(this).children().attr("class", "btn btn-success"); // set current
});
});

It is very simple
if(!$('[name="tipe"][value="str"]').is(':checked')) {
alert("it's not checked");
}

Try this code,
$(document).ready(function() {
$('label').click(function() {
$('label').find('span').attr('class','btn btn-danger');
if ($(this).find('input:checked')) {
$(this).find('span').attr('class','btn btn-success');
}
});
});
Thanks!

You can just replace above jQuery code with below code
$(document).ready(function() {
$("label").click(function() {
if ($(this).find('input[type="radio"]').is(':checked')) {
$(this).children('span').removeClass('btn btn-danger').addClass('btn btn-success');
} else {
$('label').children('span').removeClass('btn btn-success').addClass('btn btn-danger');
}
});
});

Jquery hide multiple divs onclick

I am making a fitness application, on each exercise page I have a buttons which display the 'information','data input' and the'progress'. This is working fine, however, when the buttons are clicked the divs layer over the top each other and displayed at the same time.
What I want is the information to primarily be displayed but when the user clicks the other buttons the other button divs are hidden. Thus only displaying one div at a time.
HTML
<div id="buttons">
<a class="Smallbutton" id="showInfo">
<img src="img/info.png" />
</a>
<a class="Smallbutton" id="showDataInput">
<img src="img/add-item.png" />
</a>
<a class="Smallbutton" id="showHistory">
<img src="img/bar-chart.png" />
</a>
</div>
<div class="info" style="display: none;">
<p>Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting
yourself from the seat and bring the knees to your chest.</p>
</div>
<div class="dataInput" style="display: none;">
<form onsubmit="save_data()">
Reps:
<input id="reps" type="number" name="quantity" min="1" max="12" step="1" required>Sets:
<input id="sets" type="number" name="quantity" min="1" max="4" step="1" required>
<input type="submit" value="Add Log" onclick="insert(this.form.reps.value,this.form.sets.value);show();">
</div>
<div class="history" style="display: none;">
<div id="log"></div>
<!--clears all data in localstorage-->
<input type="button" value="Clear" onclick="clearLocal();" />
</div>
SCRIPT
//JQUERY SHOW/HIDE HISTORY
$(document).ready(function() {
$('#showHistory').click(function() {
$('.history').slideToggle("fast");
});
});
//JQUERY SHOW/HIDE DATA INPUT
$(document).ready(function() {
$('#showDataInput').click(function() {
$('.dataInput').slideToggle("fast");
});
});
//JQUERY SHOW/HIDE INFO
$(document).ready(function() {
$('#showInfo').click(function() {
$('.info').slideToggle("fast");
});
});
Here is my JSFiddle http://jsfiddle.net/GYru6/
Thank you in advance
I found this example of something that i am after http://jsfiddle.net/XwN2L/ however when i implement the code into my site all the divs are displayed at once.

Some minor tweaks
Add a data-target="" to all buttons
Add a class target to all the div's
Try
<div id="buttons">
<a class="Smallbutton" id="showInfo" data-target=".info"><img src="img/info.png"/></a>
<a class="Smallbutton" id="showDataInput" data-target=".dataInput"><img src="img/add-item.png"/></a>
<a class="Smallbutton" id="showHistory" data-target=".history"><img src="img/bar-chart.png"/></a>
</div>
<div class="info target" style="display: none;">
<p>Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting yourself from the seat and bring the knees to your chest.</p>
</div>
<div class="dataInput target" style="display: none;">
<form onsubmit="save_data()">
Reps: <input id="reps" type="number" name="quantity" min="1" max="12" step="1" required />
Sets: <input id="sets" type="number" name="quantity" min="1" max="4" step="1" required />
<input type="submit" value="Add Log" onclick="insert(this.form.reps.value,this.form.sets.value);show();" />
</form>
</div>
<div class="history target" style="display: none;">
<div id="log"></div>
<!--clears all data in localstorage-->
<input type="button" value="Clear" onclick="clearLocal();"/>
</div>
then
$(document).ready(function () {
var $targets = $('.target');
$('#buttons .Smallbutton').click(function () {
var $target = $($(this).data('target')).slideToggle();
$targets.not($target).hide()
});
});
Demo: Fiddle

try adding .hide() other divs on click function
$(document).ready(function() {
$('#showHistory').click(function() {
$('.history').slideToggle("fast");
$('.dataInput').hide(); //hide other elements
$('.info').hide(); //hide other elements
});
});
FIDDLE

Try this way,
The HTML,
<div id="buttons">
<a class="Smallbutton" id="showInfo">
<img src="img/info.png" />
</a>
<a class="Smallbutton" id="showDataInput">
<img src="img/add-item.png" />
</a>
<a class="Smallbutton" id="showHistory">
<img src="img/bar-chart.png" />
</a>
</div>
<div class="info infoContainers" style="display: none;">
<p>Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting
yourself from the seat and bring the knees to your chest.</p>
</div>
<div class="dataInput infoContainers" style="display: none;">
<form onsubmit="save_data()">
Reps:
<input id="reps" type="number" name="quantity" min="1" max="12" step="1" required>Sets:
<input id="sets" type="number" name="quantity" min="1" max="4" step="1" required>
<input type="submit" value="Add Log" onclick="insert(this.form.reps.value,this.form.sets.value);show();">
</div>
<div class="history infoContainers" style="display: none;">
<div id="log"></div>
<!--clears all data in localstorage-->
<input type="button" value="Clear" onclick="clearLocal();" />
</div>
And the Javascript,
//JQUERY SHOW/HIDE HISTORY
$(document).ready(function() {
$('#showHistory').click(function() {
$('.infoContainers').slideUp();
$('.history').slideToggle("fast");
});
});
//JQUERY SHOW/HIDE DATA INPUT
$(document).ready(function() {
$('#showDataInput').click(function() {
$('.infoContainers').slideUp();
$('.dataInput').slideToggle("fast");
});
});
//JQUERY SHOW/HIDE INFO
$(document).ready(function() {
$('#showInfo').click(function() {
$('.infoContainers').slideUp();
$('.info').slideToggle("fast");
});
});
DEMO

I would use a hideAll function and call it on each element. this will simplify the logic a bit.
function hideAll(){
$('.info, .dataInput, .history').slideUp();
}
and then call it in each of your click events
$('#showInfo').click(function() {
hideAll();
$('.info').slideToggle("fast");
});
http://jsfiddle.net/GYru6/1/

How to re-index select box along with hidden fields

I'm struggling to figure out how to re-index (?) a series of hidden fields with jQuery/Javascript. The sample code below is generated each time a user clicks a create button. The numerical value applied to the hidden fields within tier[] is the index of an option selected from a drop-down.
The problem I have is every block of code (except the first i.e. tier1) should have the option to be removed. When the remove link is clicked I have implemented some jQuery which removes the div with the selected ID. The main issue is that I need to alter the name of each block on removal and re-index the drop-down so the numbers are incremental. The hidden fields will need to follow the index of the drop-down too.
I'm struggling to determine how to achieve this with Javascript or jQuery.
I've tried to include an example before any removal occurs. There are 4 blocks, each is incrementally created based on the option from the drop-down. A user could attempt to remove block 3. Currently, this will remove the option from the select using the above jQuery but as a result the display will list inconsistent block numbers, the hidden fields will have the incorrect indexes and the drop-down will be 'out of synch'.
<script type="text/javascript">
$(document).ready(function() {
$("a.removeTier").live('click', function() {
var tierId = $(this).parent().parent().attr('id').match(/\d+$/);
$('#tiers option:eq('+tierId+')').remove();
$('#tier'+tierId).remove();
return false;
});
});
</script>
<p align="left">
<label style="width: 45px;" for="newTier"><b>Tier:</b> *</label>
<button style="width: 70px; font-size: 11px;" value="New Tier" id="newTier" name="newTier">New Tier</button>
<select name="tiers" id="tiers">
<option value="0">Select</option>
<option selected="" value="1">Tier 1</option>
<option value="2">Tier 2</option>
<option value="3">Tier 3</option>
<option value="4">Tier 4</option>
</select>
</p>
<div id="tierRight">
//1
<div id="tier1">
<div style="text-align: left;">
Tier 1<br><label for="publication_date_1">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[1][publication_date]" id="publication_date_1" size="10" maxlength="10" class="publication_date hasDatepicker"> <input type="hidden" value="2010-09-01" name="tier[1][publication_date_db]" id="publication_date_db_1">
</div>
<span>
<a class="removePanel" id="panel132" title="Remove `Autism Initiatives` from `Tier 1`" href="#">Autism Initiatives</a>
<input type="hidden" value="132" name="tier[1][panels][132][panelId]">
<input type="hidden" value="Autism Initiatives" name="tier[1][panels][132][panelName]">
</span>
</div><br>
//2
<div id="tier2">
<div style="text-align: left;">
Tier 2 - [<a id="tier2" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[2][publication_date]">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[2][publication_date]" id="publication_date_2" size="10" maxlength="10" class="publication_date hasDatepicker">
<input type="hidden" name="tier[2][publication_date_db]" id="publication_date_db_2" value="2010-09-08">
</div>
<span>
<a class="removePanel" id="panel149" title="Remove `Autism 2` from `Tier 2`" href="#">Autism 2</a>
<input type="hidden" value="149" name="tier[2][panels][149][panelId]">
<input type="hidden" value="Autism 2" name="tier[2][panels][149][panelName]">
</span>
</div><br>
//3
<div id="tier3">
<div style="text-align: left;">
Tier 3 - [<a id="tier3" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[3][publication_date]">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[3][publication_date]" id="publication_date_3" size="10" maxlength="10" class="publication_date hasDatepicker">
<input type="hidden" name="tier[3][publication_date_db]" id="publication_date_db_3" value="2010-09-15">
</div>
<span>
<a class="removePanel" id="panel150" title="Remove `Autism 3` from `Tier 3`" href="#">Autism 3</a>
<input type="hidden" value="150" name="tier[3][panels][150][panelId]">
<input type="hidden" value="Autism 3" name="tier[3][panels][150][panelName]">
</span>
</div><br>
//4
<div id="tier4">
<div style="text-align: left;">
Tier 4 - [<a id="tier4" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[4][publication_date]">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[4][publication_date]" id="publication_date_4" size="10" maxlength="10" class="publication_date hasDatepicker">
<input type="hidden" name="tier[4][publication_date_db]" id="publication_date_db_4" value="2010-09-22">
</div>
<span>
<a class="removePanel" id="panel151" title="Remove `Autism 4` from `Tier 4`" href="#">Autism 4</a>
<input type="hidden" value="151" name="tier[4][panels][151][panelId]">
<input type="hidden" value="Autism 4" name="tier[4][panels][151][panelName]">
</span>
</div><br>
</div>

First you'll need to clean up your HTML - you're using id="tier1" on both a div and a a which will eventually cause problems.
Here's a simple variant that shows a possible approach:
<div class="tier">
<p class="title">Tier 1</p>
</div>
<div class="tier">
<p class="title">Tier 2</p>
<p class="delete">Delete Me</p>
</div>
<div class="tier">
<p class="title">Tier 3</p>
<p class="delete">Delete Me</p>
</div>
Javascript:
$(function() {
$(".delete").bind("click", function() {
$(this).parent().remove();
$(".tier").each( function(index) {
var tierIndex = index+1;
$(this).find(".title").text("Tier " + tierIndex);
});
});
});
Or as a jsFiddle here.