I have a script that separates the date from a datepicker into day, month, and year. It works fine when there is one form on the page but not when there is a second one (presumably due to the id being the same). How can I add a value to my id and name so that they are unique values if the script runs twice on the same page? var now = new Date();var date = jQuery('.form-date');var day = (0 + now.getDate()).slice(-2);var month = (0 + (now.getMonth() + 1)).slice(-2);var today = now.getFullYear()+-+(month)+-+(day) ;date.val(today);jQuery('form').on('submit', function() {    var newVal = date.val().split('-'),         dateParts = {            year: parseInt(newVal[0], 10),            month: parseInt(newVal[1], 10),            day: parseInt(newVal[2], 10)        };    jQuery('.anchor').append(jQuery.map(dateParts, function (index, key) {        var name = 'date_' + key;        return jQuery('<input>', {            type: 'hidden',            name: name,            id: name,            value: dateParts[key]        });    }));});Here is the form that isn't posting the correct date:<form id=modal_res action=http://www.site.com/search.php method=get name=disponibilita target=_blank class=custom>            <ul>                    <li>                <label for=modal_date class=anchor1><?php _e('Date:', 'hostel_mama' )?></label><input type=date name=date id=modal_date class=form-date datepicker>                </li>                <li>                <label for=modal_nights><?php _e('Nights:', 'hostel_mama' )?></label><input type=number name=nights id=modal_nights value=2>                </li>                 <li><label for=modal_people><?php _e('Guests:', 'hostel_mama' )?></label><input type=number name=people id=modal_people value=1>                 </li>                                                       <input name=ref type=hidden id=modal_ref value=558 />                 <input name=langClient type=hidden id=modal_langClient value=eng />                <li class=select-container>                <label for=modal_expr><?php _e('Currency:', 'hostel_mama' )?></label>                     <select name=expr id=modal_expr>        <option value=EUR selected=selected><?php _e('EURO', 'hostel_mama' )?></option>        <option value=USD><?php _e('US Dollar', 'hostel_mama' )?></option>        <option value=GBP><?php _e('British Pound', 'hostel_mama' )?></option>        </select>                </li>                </ul>                <input type=submit name=submit class=button radius text-center value=Click to Book>                                </form>
Refactor to provide for multiple instances on a single page
javascript;php;jquery
Use a closure, so everything will be only inside it's scope. Additionally you can use $ now!(function ($) {    var now = new Date();    var date = $('.form-date');    var day = (0 + now.getDate()).slice(-2);    var month = (0 + (now.getMonth() + 1)).slice(-2);    var today = now.getFullYear() + - + (month) + - + (day);    date.val(today);    var form = $('form');    form.on('submit', function (e) {        var currentForm = $(this);        var newVal = currentForm.find('.form-date').val().split('-'),            dateParts = {                year: parseInt(newVal[0], 10),                month: parseInt(newVal[1], 10),                day: parseInt(newVal[2], 10)            };        currentForm.find('.anchor').append($.map(dateParts, function (index, key) {            console.log(['date', form.index(currentForm), key].join('_'));            return $('<input>', {                type: 'hidden',                name: ['date', key].join('_'),                id: ['date', form.index(currentForm), key].join('_'),                value: dateParts[key]            });        }));    });})(jQuery);Also change class=anchor1 to class=anchorEdit: Whoops, looks like I'm wrong. You have to scope your selectors as $('.anchor').append will work on all .anchor elements. I'm assuming that it's the child of form now.