Refactor to provide for multiple instances on a single page 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('&lt;input&gt;', {
            type: 'hidden',
            name: name,
            id: name,
            value: dateParts[key]
        });
    }));

});


Here is the form that isn't posting the correct date:

&lt;form id="modal_res" action="http://www.site.com/search.php" method="get" name="disponibilita" target="_blank" class="custom"&gt;

            &lt;ul&gt;    
                &lt;li&gt;
                &lt;label for="modal_date" class="anchor1"&gt;&lt;?php _e('Date:', 'hostel_mama' )?&gt;&lt;/label&gt;&lt;input type="date" name="date" id="modal_date" class="form-date datepicker"&gt;
                &lt;/li&gt;

                &lt;li&gt;
                &lt;label for="modal_nights"&gt;&lt;?php _e('Nights:', 'hostel_mama' )?&gt;&lt;/label&gt;&lt;input type="number" name="nights" id="modal_nights" value="2"&gt;
                &lt;/li&gt; 

                &lt;li&gt;
&lt;label for="modal_people"&gt;&lt;?php _e('Guests:', 'hostel_mama' )?&gt;&lt;/label&gt;&lt;input type="number" name="people" id="modal_people" value="1"&gt; 
                &lt;/li&gt;                                       

                &lt;input name="ref" type="hidden" id="modal_ref" value="558" /&gt; 
                &lt;input name="langClient" type="hidden" id="modal_langClient" value="eng" /&gt;
                &lt;li class="select-container"&gt;
                &lt;label for="modal_expr"&gt;&lt;?php _e('Currency:', 'hostel_mama' )?&gt;&lt;/label&gt; 
                    &lt;select name="expr" id="modal_expr"&gt;
        &lt;option value="EUR" selected="selected"&gt;&lt;?php _e('EURO', 'hostel_mama' )?&gt;&lt;/option&gt;
        &lt;option value="USD"&gt;&lt;?php _e('US Dollar', 'hostel_mama' )?&gt;&lt;/option&gt;
        &lt;option value="GBP"&gt;&lt;?php _e('British Pound', 'hostel_mama' )?&gt;&lt;/option&gt;
        &lt;/select&gt;
                &lt;/li&gt;
                &lt;/ul&gt;

                &lt;input type="submit" name="submit" class="button radius text-center" value="Click to Book"&gt;                    

            &lt;/form&gt;
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 $('&lt;input&gt;', {
                type: 'hidden',
                name: ['date', key].join('_'),
                id: ['date', form.index(currentForm), key].join('_'),
                value: dateParts[key]
            });
        }));

    });
})(jQuery);


Also change class="anchor1" to class="anchor"

Edit: 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.