I was wondering if anyone would be able to help me with an issue I am having.

I have a "custom" Color picker on one of my forms. It is just a table with td cell background a certain color. When the user clicks on a td, it highlights as the selected color. What i need to do is get the id of the table cell that has been clicked and and set a hidden inputs value to that id value, so that when I check to see which "color" was selected, I can just reference the td ID.

So far I have:

1. $('td').on("click", function() {
2.     var selected = $(this).hasClass('highlight');
3.     $('td').removeClass('highlight');
4.     if(!selected) {
5.         $(this).addClass("highlight");
6.         $('#color-value').value = $(this).id;
7.         alert($('#color-value').value);
8.     }
9. })

The alert is returning undefined. I am not sure what I am doing wrong here but the line:

1. $('#color-value').value = $(this).id;

Is where I am trying to store the td ID and am getting an error.

Could someone please help to understand where I am going wrong? Thank you for any help!