Return to Question

I was thinking something like this

But I'm not sure how you obtain the color from the value property.

I was thinking that the refactored version might look something along the lines of this:

However, I would like to see what this community has to think.

$(document).ready(function() {
        $('#color-one').click(function() {
          brush.setColor('#990000');
        });
        $('#color-two').click(function() {
        brush.setColor('#CC0000');
    });
        $('#color-three').click(function() {
        brush.setColor('#CC3300;');
    });
        $('#color-four').click(function() {
        brush.setColor('#FFCC00;');
    });
        $('#color-five').click(function() {
        brush.setColor('#FFFF00;');
    });
        $('#color-six').click(function() {
        brush.setColor('#CCFF00;');
    });
        $('#color-seven').click(function() {
          brush.setColor('#66FF00;');
        });
        $('#color-eight').click(function() {
        brush.setColor('#003300;');
    });
        $('#color-nine').click(function() {
        brush.setColor('#33FFCC;');
    });
        $('#color-ten').click(function() {
        brush.setColor('#3300CC;');
    });
        $('#color-eleven').click(function() {
        brush.setColor('#660033;');
    });
        $('#color-twelve').click(function() {
        brush.setColor('#660066');
    });
        $('#color-thirteen').click(function() {
        brush.setColor('#000000');
    });
        $('#color-fourteen').click(function() {
        brush.setColor('#ffffff');
    });
    });
</script>

$(document).ready(function() {
        $('#color-one').click(function() {
          brush.setColor('#990000');
        });
        $('#color-two').click(function() {
        brush.setColor('#CC0000');
    });
        $('#color-three').click(function() {
        brush.setColor('#CC3300');
    });
        $('#color-four').click(function() {
        brush.setColor('#FFCC00');
    });
        $('#color-five').click(function() {
        brush.setColor('#FFFF00');
    });
        $('#color-six').click(function() {
        brush.setColor('#CCFF00');
    });
        $('#color-seven').click(function() {
          brush.setColor('#66FF00');
        });
        $('#color-eight').click(function() {
        brush.setColor('#003300');
    });
        $('#color-nine').click(function() {
        brush.setColor('#33FFCC');
    });
        $('#color-ten').click(function() {
        brush.setColor('#3300CC');
    });
        $('#color-eleven').click(function() {
        brush.setColor('#660033');
    });
        $('#color-twelve').click(function() {
        brush.setColor('#660066');
    });
        $('#color-thirteen').click(function() {
        brush.setColor('#000000');
    });
        $('#color-fourteen').click(function() {
        brush.setColor('#ffffff');
    });
    });
</script>

$(document).ready(function() {
        $('#color-one').click(function() {
          brush.setColor('#990000');
        });
        $('#color-two').click(function() {
        brush.setColor('#CC0000');
    });
        $('#color-three').click(function() {
        brush.setColor('#CC3300;');
    });
        $('#color-four').click(function() {
        brush.setColor('#FFCC00;');
    });
        $('#color-five').click(function() {
        brush.setColor('#FFFF00;');
    });
        $('#color-six').click(function() {
        brush.setColor('#CCFF00;');
    });
        $('#color-seven').click(function() {
          brush.setColor('#66FF00;');
        });
        $('#color-eight').click(function() {
        brush.setColor('#003300;');
    });
        $('#color-nine').click(function() {
        brush.setColor('#33FFCC;');
    });
        $('#color-ten').click(function() {
        brush.setColor('#3300CC;');
    });
        $('#color-eleven').click(function() {
        brush.setColor('#660033;');
    });
        $('#color-twelve').click(function() {
        brush.setColor('#660066');
    });
    });
</script>

$(document).ready(function() {
        $('#color-one').click(function() {
          brush.setColor('#990000');
        });
        $('#color-two').click(function() {
        brush.setColor('#CC0000');
    });
        $('#color-three').click(function() {
        brush.setColor('#CC3300;');
    });
        $('#color-four').click(function() {
        brush.setColor('#FFCC00;');
    });
        $('#color-five').click(function() {
        brush.setColor('#FFFF00;');
    });
        $('#color-six').click(function() {
        brush.setColor('#CCFF00;');
    });
        $('#color-seven').click(function() {
          brush.setColor('#66FF00;');
        });
        $('#color-eight').click(function() {
        brush.setColor('#003300;');
    });
        $('#color-nine').click(function() {
        brush.setColor('#33FFCC;');
    });
        $('#color-ten').click(function() {
        brush.setColor('#3300CC;');
    });
        $('#color-eleven').click(function() {
        brush.setColor('#660033;');
    });
        $('#color-twelve').click(function() {
        brush.setColor('#660066');
    });
        $('#color-thirteen').click(function() {
        brush.setColor('#000000');
    });
        $('#color-fourteen').click(function() {
        brush.setColor('#ffffff');
    });
    });
</script>

I was thinking something like this

$('#color-one, #color-two, ... color-fourteen).click(function() {
  brush.setColor(this.val);
});

But I'm not sure how you obtain the color from the value property.