Show/hide required password field

HTML

<form method="post" accept-charset="UTF-8" enctype="multipart/form-data" class="c-form">
  <div class="c-form__row">
    <label class="c-form__label" for="email">Email</label>
    <div class="c-form__field">
      <div class="c-input__control">
        <input required class="c-input js-show-target-on-change" data-type="email" type="email" id="email" name="email" value="info@johndoe.com" data-value="info@johndoe.com">
      </div>
    </div>
  </div>

  <div class="c-form__row">
    <label class="c-form__label" for="newPassword">New password</label>
    <div class="c-form__field">
      <div class="c-input__control">
        <input class="c-input js-show-target-on-change" type="password" id="newPassword" name="newPassword">
      </div>
    </div>
  </div>

  <div class="c-form__row js-show-target-on-change__target" style="display: none;">
    <label class="c-form__label" for="currentPassword">
      Current password
      <span class="u-warning">(required to change email or password)</span>
    </label>
    <div class="c-form__field">
      <div class="c-input__control">
        <input class="c-input" type="password" id="currentPassword" name="password">
      </div>
    </div>
  </div>

  <div class="c-form__submit">
    <button class="c-button c-button--fullwidth" type="submit">Save</button>
  </div>
</form>

JavaScript

let requiredSet;

$('.js-show-target-on-change').on('input', function() {
  const target = $('.js-show-target-on-change__target');
  let currentValue = $(this).val();

  if ( $(this).data('type') === 'email' ) {
    const emailValue = $(this).data('value');

    if ( currentValue !== emailValue && !requiredSet === true ) {
      target.show();
      target.find('input').prop('required', true);

      requiredSet = true;
    } else if ( currentValue === emailValue ) {
      target.hide();
      target.find('input').prop('required', false);

      requiredSet = false;
    }
  } else {
    if ( !requiredSet === true ) {
      target.show();
      target.find('input').prop('required', true);

      requiredSet = true;
    } else if ( !currentValue.length ) {
      target.hide();
      target.find('input').prop('required', false);

      requiredSet = false;
    }
  }
});