как использовать средство выбора даты более одного раза?

Question

это моя форма:

<div class="educationalInfo__wrapper">
  <div class="row educationalInfo">
    <div class="col-md-2">
    <form>            
        <div class="col-md-2">
            <div class="form-group">
                <label><code>* </code>تاریخ شروع</label>
                <input type="text" class="clear startdate" name="education[startdate][]" id="startdate" tabindex="14">
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label><code>* </code>تاریخ پایان</label>
                <input type="text" class="enddate clear" name="education[enddate][]"" id="enddate"  tabindex="14">
            </div>
        </div>
        <div class="col-md-1 col-sm-1 col-xs-2">
            <div class="form-group plus-mg">
                <label></label>
                <a href="javascript:void(0)" id="educationalInfo__add" tabindex="42">
                    <span class="glyphicon glyphicon-plus"></span>
                </a>
            </div>
        </div>

    </form>
     </div>
  </div>
</div>

Я использую клон для дублирования формы:

$('#educationalInfo__add').click(function () {
    var clone_r = $('.educationalInfo').eq(0).clone(true);
    clone_r.find('.clear').val('');
    $('.educationalInfo__wrapper').append(clone_r);



    $(".gpa").mask("99/99", {placeholder: "../.."});
    $(".enddate").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '-50:-15',
        dateFormat: 'yy/mm/dd'
    });
    $(".startdate").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '-50:-15',
        dateFormat: 'yy/mm/dd'
    });



});

, но средство выбора даты работает только для первой, даже если я нажимаю надругой будет принадлежать только первому.Я использовал классы, но они не работали. С этим описанием кто-то может помочь мне решить эту проблему ??

Answer 1

Попробуйте этот код

$('#educationalInfo__add').click(function() {
    var clone_r = $('.educationalInfo').eq(0).clone(false);
    clone_r.find('.clear').val('');
    $('.educationalInfo__wrapper').append(clone_r);
    //$(".gpa").mask("99/99", {placeholder: "../.."});
    clone_r.find('.startdate').each(function() {
        $(this).removeAttr('id').removeClass('hasDatepicker'); // 
        $('.startdate').datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '-50:-15',
            dateFormat: 'yy/mm/dd'
        });
    });
    clone_r.find('.enddate').each(function() {
        $(this).removeAttr('id').removeClass('hasDatepicker'); // 
        $('.enddate').datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '-50:-15',
            dateFormat: 'yy/mm/dd'
        });
    });
});


$(".enddate").datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: '-50:-15',
    dateFormat: 'yy/mm/dd'
});
$(".startdate").datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: '-50:-15',
    dateFormat: 'yy/mm/dd'
});

скриптовая ссылка