Question

I have a form that allows the user to pick 3 date periods (or 1 or 2).
This pattern is repeated allowing the user to select dates for Custom ranges, weekly, monthly, daily and so on.
if there a way I can optimise the jquery so that I dont have to write out the whole jquery function per input?
the only thing that really changes is the number in the id.

<input type='text' id='custom1from'><input type='text' id='custom1until'>
<input type='text' id='custom2from'><input type='text' id='custom2until'>
<input type='text' id='custom3from'><input type='text' id='custom3until'>

<input type='text' id='monthly1from'><input type='text' id='monthly1until'>
<input type='text' id='monthly2from'><input type='text' id='monthly2until'>
<input type='text' id='monthly3from'><input type='text' id='monthly3until'>



$("#custom1from").click(function() {
        $("#custom1from").datepicker();
      });

      $("#custom1until").click(function() {
        $("#custom1until").datepicker();
      });

      $("#custom2from").click(function() {
        $("#custom2from").datepicker();
      });

      $("#custom2until").click(function() {
        $("#custom2until").datepicker();
      });


  $("#custom3until").click(function() {
    $("#custom3until").datepicker();
  });
  $("#custom3until").click(function() {
    $("#custom3until").datepicker();
  });

Answer 1

Just give it a class and select on that.

<input type='text' class="datepick" id='custom1from'><input type='text' id='custom1until'>
<input type='text' class="datepick" id='custom2from'><input type='text' id='custom2until'>
<input type='text' class="datepick" id='custom3from'><input type='text' id='custom3until'>

<input type='text' class="datepick" id='monthly1from'><input type='text' id='monthly1until'>
<input type='text' class="datepick" id='monthly2from'><input type='text' id='monthly2until'>
<input type='text' class="datepick" id='monthly3from'><input type='text' id='monthly3until'>

$(".datepick").datepicker();