on my code i have a button and if the user clicks the button i try to change a timer which displays on ui by 20 minutes

this was my ui code

this was the function where the user clicks the button then it will get called and following lines get executed

$('input[name$="timer[1]"').addClass('increaseTimer').removeClass('inputTimer');

The class name gets changed while clicking the button, but the timer is not getting increased

the UI shows the time of input timer class

Increase timer code:

$(".increaseTimer").datetimepicker({

  ignoreReadonly:true,

  format: 'LT',

  defaultDate: genDate()+' 00:20'

});

Input timer code:

$(".inputTimer").datetimepicker({

  ignoreReadonly:true,

  format: 'LT',

  defaultDate: genDate()+' 00:00'

});

the increase timer is working only if the input timer is not used in UI itself, at that time the increase timer is applying while clicking the button

the remove class is applied , but the UI shows the timer and it not get removed from UI

What wrong in my code

please helpme out