Individual script values within a modal

Question

I have a modal that presents a number and I do this with the help of java script. On my page I have a search, and in the results I realized that only the first result appears with the field with the correct formatting like this: [phone].

How can I make so that in the results javascript can understand each script as individual?

Follows my code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>
<!--Campo NUMERO-->
            <label for="numero" class="control-label" >
                <br>NÚMERO:<br></label>
            <div class="input-group col-lg-5">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-earphone" id="basic-addon-numero"></span>
                </div>
                <input type='text' id='numero' name='numero' value="<?php echo $numero ?>" class="form-control" maxlength='15' required autofocus placeholder="[phone]"><br>
              <script>
              $(window).load(function()
              {
              var phones = [{ "mask": "(##) ####-####"}];
              $('#numero').inputmask({ 
              mask: phones, 
              greedy: false, 
              definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
              });
            </script>
            </div>
            <!--Fim Campo NUMERO-->

I have an example that I use, however, as I don’t know much about Javascript I don’t know how to adapt to the case I asked. Follow the example I use in fashion and it works.

<script>
	function mostrar1(e) {
		var tipo = e.parentNode.querySelector("[name='senha1']");
		if (tipo.type == "password") {
			tipo.type = "text";
			} else {
			tipo.type = "password";
		}
		
		tipo.type = tipo.type; //aplica o tipo que ficou no primeiro campo
		
		if (e.classList.contains("glyphicon-eye-open")) { //se tem olho aberto
			e.classList.remove("glyphicon-eye-open"); //remove classe olho aberto
			e.classList.add("glyphicon-eye-close"); //coloca classe olho fechado
			} else { //senão
			e.classList.remove("glyphicon-eye-close"); //remove classe olho fechado
			e.classList.add("glyphicon-eye-open"); //coloca classe olho aberto
		}
		
	}
</script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Campo Senha-->
<form method="POST">
	<div class='input-group col-lg-6'>
		<div class='input-group-addon'>
			<span class='glyphicon glyphicon-question-sign'></span>
		</div>
	<input type='password' name='senha1' id="senha1" class='form-control' placeholder='Nova Senha' autofocus required></div>
	<button type="button" class="btn btn-sm glyphicon glyphicon-eye-open "
	onclick="mostrar1(this)"></button>
</form>
<!-- Script para ambos os botões -->													

Answer 1

Don’t use the same id for several elements. A id should be unique on the page. So the plugin will only take the first one you find and ignore the rest.

Utilize class="numero" that the plugin will apply the mask to all elements with that class:

$(window).load(function(){
   var phones = [{ "mask": "(##) ####-####"}];
   $('.numero').inputmask({ 
   mask: phones, 
   greedy: false, 
   definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>

<input type='text' class='numero' name='numero' value="1234567890" class="form-control" maxlength='15' required autofocus placeholder="[phone]"><br>
<input type='text' class='numero' name='numero' value="1234567890" class="form-control" maxlength='15' required autofocus placeholder="[phone]"><br>
<input type='text' class='numero' name='numero' value="1234567890" class="form-control" maxlength='15' required autofocus placeholder="[phone]"><br>