Doesn't play well with form fields added by client-side scripting

[o-alquimista]

The mask works for the first <input[class=masked]> added by scripting (on page load), but any other added later doesn't have it. The input elements come from a template. This is a simplified example:

<template id="phoneTemplate">
  <div>
    <label for="">Phone</label>
    <input type="tel" id="" name="" placeholder="99 99999-9999" class="masked" pattern="\d{2} \d{5}-\d{4}" required="required" value="">
  </div>
</template>

The empty attributes above are defined in scripting.

Here's how it looks:

Here's a fiddle that reproduces it: https://jsfiddle.net/43h9vkot/8/ I'm working on a solution for this.