jQuery: how do I have two date pickers?

Question

On my site, I want to have a date range thing, so I figured I'd use two date pickers from http://jqueryui.com/demos/datepicker/

currently, both date pickers edit the same field... which makes me sad.

$j(function() {
    $j(".date-range-start .date-picker input").datepicker({
        //showOtherMonths: true,
        changeYear: true,
        showAnim: 'fadeIn',
        showOn: 'button'
    });
    $j(".date-range-end .date-picker input").datepicker({
        //showOtherMonths: true,
        changeYear: true,
        showAnim: 'fadeIn',
        showOn: 'button'
    });
});

i figured since I have two different selectors I'd be able to change two different fields, right?

well... apparently it hates me.

<div class="date-range-picker">
            <div class="date-range-start">
                <div class="date-picker">
                    <input id="classinput-field" name="classinput-field" type="text" class="hasDatepicker"><button type="button" class="ui-datepicker-trigger">...</button>
                </div>
            </div>
            <div class="date-range-end">
                <div class="date-picker">
                    <input id="classinput-field" name="classinput-field" type="text" class="hasDatepicker"><button type="button" class="ui-datepicker-trigger">...</button>
                </div>
            </div>
        </div>

Answer 1

Give them two separate ID's.

$("#id1").datepicker();
$("#id2").datepicker();