Series of jQuery click events I have the following series of click events in my jQuery code:

$('#morning .up .hour').click(function () {
  morning.hour++
  update_hour(morning);
});

$('#morning .up .min').click(function () {
  morning.min++
  update_min(morning);
});

$('#morning .up .sec').click(function () {
  morning.sec++
  update_sec(morning);
});

$('#morning .down .hour').click(function () {
  morning.hour--
  update_hour(morning);
});

// ...
// morning down min
// morning down sec
//
// evening up hour
// evening up min
// evening up sec
//
// evening down hour
// evening down min
// ...

$('#evening .down .sec').click(function () {
  evening.sec--
  update_sec(evening);
});


Each alarm has an object which contains the values for the hours, minutes and seconds, along with the selector for the values (this is used in the update functions explained below):

var morning = {
  selecthour: "#morning .time .hour",
  selectmin: "#morning .time .min",
  selectsec: "#morning .time .sec",
  hour: 7,
  min: 0,
  sec: 0
};


And finally the HTML code:

&lt;div id="morning"&gt;
    &lt;div class="wrapper"&gt; &lt;!-- Wrapper for styling --&gt;
        &lt;div class="up"&gt; &lt;!-- Up arrows --&gt;
            &lt;div class="hour"&gt;Up&lt;/div&gt;
            &lt;div class="min"&gt;Up&lt;/div&gt;
            &lt;div class="sec"&gt;Up&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="time"&gt; &lt;!-- hour, min and sec fields --&gt;
            &lt;span class="hour"&gt;EX&lt;/span&gt;:&lt;span class="min"&gt;AM&lt;/span&gt;:&lt;span class="sec"&gt;PL&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="down"&gt; &lt;!-- Down arrows --&gt;
            &lt;div class="hour"&gt;Down&lt;/div&gt;
            &lt;div class="min"&gt;Down&lt;/div&gt;
            &lt;div class="sec"&gt;Down&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;     
&lt;/div&gt;


The basic structure of the page is:


There are several alarms, each of which has a unique ID (currently there are two: one named morning, one named evening.)
Each alarm has an hour, minute and second field (see div.time)
Each field, in each alarm, has an up and a down arrow which increases or decreases the time
In the selectors above, the ID is the alarm, the first class is the up or down arrow, and the second class is the field which the arrow is associated with (hour/min/sec)


When a button is clicked, the following should happen:


The hour, min or sec property of the alarm object (morning or evening) is incremented or decremented by 1, based on the arrow pressed
The update_hour, update_min, or update_sec function is called, with the alarm object as its argument (morning or evening)
The update function checks and corrects any invalid input, then updates the appropriate field of the appropriate alarm in the HTML.


It takes 6 functions, each 3 lines long, for every alarm. For just the two alarms that's 36 lines of repetitive code.

Is it possible to simplify this series of jQuery .click() statements? Bonus points if it works with more than the two specified alarms. (I have an array containing all of the alarms if that helps)
Your name of properties and selectors has consistency, so make a arrays of the parts that change.

I've also added the objects you're mutating and the functions you're calling to other objects so that they can be referenced using a variable.

var am_pms = ["morning", "evening"]
var dirs = ["up", "down"]
var units = ["sec", "min", "hour"]

var am_pm_obj = {
  morning: morning,
  evening: evening
}
var update_funcs = {
  sec: update_sec,
  min: update_min,
  hour: update_hour
}


Then iterate the arrays, patching in the parts. This will cover all the functions you need to create:

am_pms.forEach(function(morn_even) {  
  dirs.forEach(function(dir) {
    var offset = dir === "up" ? 1 : -1

    units.forEach(function(s_m_h) {
      $('#' + morn_even + ' .' + dir + ' .' + s_m_h).click(function () {
        am_pm_obj[morn_even][s_m_h] += offset
        update_funcs[s_m_h](am_pm_obj[morn_even])
      })
    })
  })
})



morn_even will be "morning" or "evening"
dir will be "up" or "down"
offset will be 1 or -1, which replaces ++ and --
s_m_h will be "sec", "min" or "hour"


The string variables will be used to build the selector and also to access the objects you mutate (and pass) and the functions you call, which is why the objects and functions needed to be nested in another object.