I wrote [this code](http://jsfiddle.net/abitdodgy/7rFb6/6/) to allow users to select multiple images, and each image can be selected multiple times. It feels convoluted, though, and prone to errors, such as forgetting to do something associated with an action.

How can I make it more object-oriented or reusable?

```
var images = [];

function removeImage(image) {
    while((index = images.indexOf(image)) !== -1) {
        images.splice(index, 1);
    }
}
function decrementImage(image) {
    var index = images.indexOf(image);
    images.splice(index, 1);
}

function countOccurrences(image) {
    var occurrences = 0;
    for (i = 0; i < images.length; i++) {
        if (images[i] === image) occurrences += 1
    }
    return occurrences;
}

$('#image-container').on('click', 'img', function () {
    var image = $(this),
        source = image.attr('src');
        image.data('selected', true).addClass('selected').siblings('.controls').show();
        images.push(source);
        image.siblings('span.count').html(countOccurrences(source));
});

$('#image-container').on('mouseleave', '.image-wrapper', function () {
    $(this).children('.controls').hide(); 
});

$('#image-container').on('mouseenter', 'img', function () {
    var image = $(this),
        controls = image.siblings('.controls');
    if (image.data('selected') === true) {
        controls.show();
    }
});

$('#image-container').on('click', '[data-action="remove"]', function () {
    var controls = $(this).parents('div.controls'),
        image = controls.siblings('img')
        source = image.attr('src');
        image.data('selected', false).removeClass('selected');
        controls.hide();
        removeImage(source);
        image.siblings('span.count').html(countOccurrences(source));
});

$('#image-container').on('click', '[data-action="increment"]', function () {
    var image = $(this).parents('.controls').siblings('img'),
        source = image.attr('src');
    images.push(source);
    image.siblings('span.count').html(countOccurrences(source));
});

$('#image-container').on('click', '[data-action="decrement"]', function () {
    var image = $(this).parents('.controls').siblings('img'),
        source = image.attr('src');
    decrementImage(source);
    var count = countOccurrences(source)
    image.siblings('span.count').html(count);
    if (count < 1) {
        image.siblings('.controls').hide();
        image.data('selected', false).removeClass('selected');
    }
});

$(document).click(function () {
    console.log(images);
});

```

**HTML**

```
<div id="image-container">
    <div class="image-wrapper">
        <img src="http://i.imgur.com/nIZvrpS.jpg" width="100" height="100" data-selected="false" />
        <div class="controls">
            <a href="#" data-action="remove">Remove</a>
            <a href="#" data-action="increment">Increment</a>
            <a href="#" data-action="decrement">Decrement</a>
        </div>
        <span class="count">0</span>
    </div>
    <div class="image-wrapper">
        <img src="http://i.imgur.com/lUaIBXc.jpg" width="100" height="100" data-selected="false" />
        <div class="controls">
            <a href="#" data-action="remove">Remove</a>
            <a href="#" data-action="increment">Increment</a>
            <a href="#" data-action="decrement">Decrement</a>
        </div>
        <span class="count">0</span>
    </div>
    <div class="image-wrapper">
        <img src="http://i.imgur.com/DQzWfza.jpg?1" width="100" height="100" data-selected="false" />
        <div class="controls">
            <a href="#" data-action="remove">Remove</a>
            <a href="#" data-action="increment">Increment</a>
            <a href="#" data-action="decrement">Decrement</a>
        </div>
        <span class="count">0</span>
    </div>
</div>

```