increase value of an ID after clicking a link

Question

I am using a date picker "start date" and with "end date", also in my php page I am using "add more field", I want to, when i am clicking on add more it should also increase date id, below is code which will give u better idea.

<script>
if (top.location != location) {
top.location.href = document.location.href ;
}
$(function(){
window.prettyPrint && prettyPrint();

// disabling dates var nowTemp = new Date(); var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var value = 1;   
value++;

var checkin = $('#dpd1').html(value).datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#dpd2').html(value)[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').html(value).datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' :     '';
}
}).on('changeDate', function(ev) {
checkout.hide();
}).data('datepicker');
});
</script>

This is my code in footer of the page, Now what i want when click on "add more row" .. code is below..

<table><tr><td><a href="#" title="" class="add-touring">Add more row...</a></td></tr></table>

Its should add 1, 2, 3.... as many times i click on "add more row". I mean it should work like "#dpd1" should #dpd12, #dpd13, #dpd14..and so on.

Actually when im clicking on "Add More row" ... its added a new row, just below 1st row, and again if im clicking again adding another row, so its like if my 1st "start date" id is id="dpd1" and end date id is id ="dpd2", it become in second row start date id="dpd12" and end date id ="dpd22" and in 3rd row its become start date id="dpd13" and end date id ="dpd23" .... its happening when im clicking add more row, in javascript its still only working with start date id="dpd1" and end date id="dpd2", and thats why its not working with 2nd row and 3rd row and so on, as u can see it in my jscript, what i want as my row working and with start date and end date increasing/adding value in id, the same way when i click on "add more row" its also add same way in my javascript, then my datepicker will work with every row, when i will click on add more row. for now its working for only first row.

I hope all of u can understand and give me a proper solution.

Thank you so much!

Answer 1

If I understand your question correctly, you aren't actually trying to change the ID of a specific element, but you are trying to increment the SELECTOR so that it selects the appropriate element. Is that correct?

If that is the case, you can use a variable in your selector. Instead of doing:

$("#dpd2").html(value).focus(); 

You could do something like:

var currentDatePickerID = 0; 

And increment it each time your button is clicked, and then your selector would look like:

$("#dpd" + currentDatePickerID).html(value).focus(); 

That way your selector is dynamic.

Answer 2

Here is solution.. which i implemented in my script..

var counterTouring = 1;
$('.add-touring').click(function(event){
event.preventDefault();
counterTouring++;

var checkin = $('#dpd1' + counterTouring).html(value).datepicker({ 
//---- 
});

Thanks to all!