JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input id="input">
<br>
<button id="type-text">type="text"</button>
<br>
<button id="type-password">type="password"</button>
<br>
<button id="type-email">type="email"</button>
<br>
<button id="type-file">type="file"</button>

<div id="debug-info"></div>

JavaScript

var input = $('#input');

$('button[id^=type-]').on('click', function() {
  var type = $(this).prop('id').replace('type-', '');
  
  if (type === 'file') {
  	var newElement = document.createElement('input');
    newElement.type = type;
    newElement.id = input.prop('id');
    
    input.replaceWith(newElement);
    input = $('#input');
  } else {
    input.prop('type', type);
  }
  
  $('#debug-info').html(
  	'Trying to change the input type to <strong>' + type + '</strong>.<br>' +
    'Actual input type is <strong>' + input.prop('type') + '<strong>.'
  );
  
  if (type == input.prop('type')) {
    $('#debug-info').css('color', 'green');
  } else {
    $('#debug-info').css('color', 'red');
  }
});