Formatting an array of input fields

[TapeGun007]

I use this function to simply format a phone number input field on a form.  It doesn't allow users to enter anything but numbers and forces the format such as (xxx)xxx-xxxx.  Here is the function code:

 

 

<script type='text/javascript' src='../components/js/jquery.js?ver=1.11.2'></script> 
<script src="../components/js/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
   $("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
   $("#phone").mask("(999) 999-9999");
   $("#time").mask("99:99",{placeholder:"hh:mm"});
});
</script>

[TapeGun007]

(not sure what happened, entire post didn't post)

 

Anyway, so I have php code that loops this line because I have a tabular form where you can input up to 5 clients information at a time on a page.

 

<td><input id="phone" name="Phone[]" size="10" maxlength="10"/></td>

 

The issue is that the phone number formatting only works on the first phone input field, and none of the rest.  I've tried to research, but I'm a complete noob at Jquery and not sure how to apply this function to an array of input fields.

[scootstah]

Because you're trying to use the same ID on multiple elements. ID's are unique. Use a class, or add something unique to the ID, like a number.

 

jQuery(function($){
   ...
   $(".phone").mask("(999) 999-9999");
   ...

});

<td><input class="phone" name="Phone[]" size="10" maxlength="10"/></td>

OR

 

jQuery(function($){
   ...
   $("[id^=phone-]").mask("(999) 999-9999");
   ...

});

<td><input id="phone-1" name="Phone[]" size="10" maxlength="10"/></td>
<td><input id="phone-2" name="Phone[]" size="10" maxlength="10"/></td>
<td><input id="phone-3" name="Phone[]" size="10" maxlength="10"/></td>
<td><input id="phone-4" name="Phone[]" size="10" maxlength="10"/></td>
<td><input id="phone-5" name="Phone[]" size="10" maxlength="10"/></td>