How to create generic jquery function for each input

How to create generic jquery function for each input

I have the following html code that works as is: (I've tried the two answers given below but neither of them work any other suggestions would be appreciated)

<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" /> 
  <script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js"></script> 
  <script src="http://bililite.nfshost.com/inc/jquery.timepickr.js">   </script>  
  </head>

  <body>
  <script type="text/javascript">
     $(function() 
     {
        $('#timepickr-start:eq(0)').timepickr
           ({
              convention: 12,
              hoverIntent: false
           })
     });
  </script>
  <script type="text/javascript">
     $(function() 
     {
        $('#timepickr-end:eq(0)').timepickr
           ({
              convention: 12,
              hoverIntent: false
           })
     });
  </script>

  <div>
     <input id="timepickr-start" name='start' /> 
  </div>
  <br>
  <div>
     <input id="timepickr-end" name='end' />
  </div>

</body>
</html>

Is there a way to have just one function? I'm using php and getting back $_POST['start'] and $_POST['end']. It's not much of a problem when I have only two time input fields but on some pages I have 6 or 8. php jquery

FIRST SUGGESTION:

If you would like to initialize multiple timepicker instances with a single javascript function, you could add a class, let's say timepickr, to each instance to initialize, and use the folowing function:

<script type="text/javascript">
 $(function() 
 {
    $(".timepickr").each(function() {
      $(this).timepickr({
          convention: 12,
          hoverIntent: false
       });
    });
 });
</script>

Hi, thanks for the suggestion but it didn't work. Not sure how to proceed. btw, the example above was missing a }) but even with that added in it doesn't work

SECOND SUGGESTION:

1.Create a common class for all the required fields and add the function to that class like this:

$('.classname').timepickr({
  convention: 12,
  hoverIntent: false
});

OR

2.Use the attribute starting with selector

$("input[id^='timepickr']").timepickr({
 convention: 12,
 hoverIntent: false
});

The second method could prove more feasible in case you have several such input fields and you don't wanna bother adding a class to each field.

I tried the first way with the class name and that works for the first input but not any of the subsequent inputs –

On your second method is that part of the function as in: $(function() { $("input[id='timepickr']").timepickr ({ convention: 12, hoverIntent: false }) }); or something else - I need to pass in :eq(0) so I don't think this will work either –