change text input value based on check box, multiple fields with same class name

I have many checkboxes and below each there is a hidden date field.
I need to show the div with the date field and select different date.
in the begging I need to add 30 days from today when the checkbox is checked by deafutl, then the user can change the date.
When I click to first choice and change the date is ok….but when I click to another the first date field takes the default value. Any sggestions?

$('.chkPages').change(function () {
        
        if (this.checked)
        {
            var dateStr = new Date();
            dateStr.setDate(dateStr.getDate() + 30)
            dateStr = dateStr.getDate() + "/" + (dateStr.getMonth() + 1) + "/" + 
            dateStr.getFullYear();
           
            $(this).closest('div').next('.extrafields').fadeIn('slow');
           
            $(".DurationDate").val(dateStr);
        }

        else {
            dateStr = "";
            $(this).closest('div').next('.extrafields').fadeOut('slow');
            $(".DurationDate").val(dateStr);
        }