Почему при изменении полей с одинаковым классом меняется только первое поле?

Question

[runapa]

$('.datepicker-input').datepicker({
    minDate: 0,
    onClose: function(dateText, inst) {
        $('.date').text(
            inst.selectedDay       +"-"+
            (inst.selectedMonth+1) +"-"+
            inst.selectedYear);
    }
});
$('.date').click(function() {
    $('.datepicker-input').focus();
});

<div style="height:0px; overflow:hidden">
    <input class="datepicker-input" type="date"/>
</div>
<span class="date" contentEditable="true">Date?</span>

Проблема в том, что html генерируется из базы данных, и когда я кликаю например на третий элемент, и меняю в нём значние, почему-то меняется всегда самый первый элемент. Как мне сделать так, чтобы менялся тот элемент, по которому я кликаю ?

Answer 1

[0xD34F]

$('.datepicker-input').datepicker({
  minDate: 0,
  onClose(dateText, inst) {
    $(this).parent().next('.date').text([
      inst.selectedDay,
      inst.selectedMonth + 1,
      inst.selectedYear
    ].join('-'));
  }
});

$('.date').click(function() {
  $(this).prev('div').find('.datepicker-input').focus();
});

Comments

[runapa]

Чот теперь только последний элемент меняется.

[0xD34F]

runapa, да ну?

[runapa]

ну да. В codepen всё работает как надо, а на локале этот же код ведёт себя странно.
Элементов у меня три. При клике на первый элемент первым двум ставится сегодняшняя дата. После ввода значения, оно подставляется в последний элемент, но сегодняшняя дата остаётся у первых двух. Я не знаю почему оно так работает.

[0xD34F]

runapa, смотрите, что есть у вас, смотрите мой пример - сравнивайте, думайте. "Код ведёт себя странно" == "я не понимаю этот код". Пытаться угадать, что там у вас и как я конечно же не буду.

[runapa]

Оказалось, что самописная цмс, которую я использую, втихаря раскоментировала закоментированные скрипты. Проблема решена.