Пользовательский тумблер перестает работать после трех переключений

// Some function that will run when the input is checked.
const whenChecked = (input) => {
  $('input[name = "tin"], label[for = "tin"]').prop('disabled', input.checked);
  $(input).prop('name', "tin");
  $('#tinSwitchText').fadeIn(1500);
};


// Some function that will run when the input is unchecked.
const whenUchecked = (input) => {
  $('input[name = "tin"], label[for = "tin"]').prop('disabled', input.checked);
  $(input).prop('name', "switch");
  $('#tinSwitchText').hide();
};


// Some function to handle the input state change.
const onChangeHandler = (input) => input.checked ? whenChecked(input) : whenUchecked(input);


// Wait for the DOM to load.
$(document).ready(() => {
  const input = document.querySelector("input[name=switch]");
  input.onchange = () => onChangeHandler(input);
});

<!-- Include jQuery. -->
<script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div class = "form-group d-flex " >
  <span class = "w-15 d-flex justify-content-end">
    <input value = "Get TIN" type = "checkbox" id = "id-name--1" name = "switch" class = "switch-input">
    <label for = "id-name--1" class = "switch-label"></label>
  </span>
  
  <!-- 
     - I've set the content of $('#tinSwitchText') to the default value below, 
     - the reason being because in the example code you provided, there wasn't much
     - going on? It would either be hidden, or visible, and essentially in this 
     - solution, it maintains the same functionality, but by all means, feel free to 
     - change it as you like.
    -->
  <span class = "w-85 d-flex justify-content-start">
    <label for = "">I dont have a TIN, I want to get one <br>
      <small><i style = "display:none" id = "tinSwitchText">(This will attract an added cost)</i></small> 
    </label>
  </span>
  
 </div>