Changing Attributes for two inputs fields

Question

I'm have some problems to add attributes to these input fields using jQuery:

<input id='timetable_start'>
<input id='timetable_finish'>

<script>
attributes = {
    "class": "reloj",
    "maxlength": "5",
    "pattern": "^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$",
    "size": "6",
    "type": "text"
};

$('#timetable_finish').attr(attributes);
$('#timetable_start').attr(attributes);
</script>

Why only one is changed? What I'm missing? Thanks in advance for you time
Link: http://jsbin.com/iqipan/4/edit

Answer 1

Because the code throws an error when you are trying to set the attributes for the first input field:

Uncaught Error: type property can't be changed.

Remove type from the object and everything will be fine.

---

Some browsers (I guess IE) don't allow to change the type of an input element after it was created, so jQuery throws an exception if you are trying to do that. See change type of input field with jQuery.