title: How to get the correct value when a masked input is edited(custom masking)
body: <p>I have two inputs(masked and unmasked) and a toggle button that serves as a show/hide button. It works similarly as password masking except that it only masks certain characters in a string. Whatever I input in the <code>unmasked</code> text box, <code>createMask</code> function is called and the result is shown in the <code>masked</code> text box.</p>
  
  <p>The problem is, when the masked text box is shown and I edit the value, it should update the value in the unmasked text box.</p>
  
  <p>For example, <code>12345678</code> -> <code>1XXXX678</code></p>
  
  <p>Then I will edit <code>1XXXX678</code> to <code>1XXXX619</code></p>
  
  <p>When I click the button to unmask, it should show <code>12345619</code></p>
  
  <p>For better understanding, here's the full code: <a href="https://jsfiddle.net/759ncLhr/" rel="nofollow noreferrer">jsfiddle</a></p>