JQuery click event works only once
<p>Here is what I have already:</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="reset.css" /&gt;
    &lt;script src="jquery.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(function () {
            // Page Load
            //// Set default size of canvas
            var canvas_height = 124;
            var canvas_width = 124;
            //// Set starting point and first option point
            $('#canvas div:first-child').addClass('start');
            $('#canvas div:nth-child(2)').addClass('option');
            GenerateIDs();

            $('#btnID').click(function(){
                GenerateIDs();
            });

            // Generates IDs dynamically
            function GenerateIDs(){
                var row = 0;
                var col = 0;
                var lastdivposition = 0;
                $('#canvas div').each(function(){
                    if ($(this).position().top &gt; lastdivposition)
                    {
                        row += 1;
                        col = 1;
                    }
                    else
                        col += 1;
                    $(this).attr('id', row + '-' + col);
                    lastdivposition = $(this).position().top
                });
            }

            $('.option').click(function(){
                if($(this).attr('id').split('-')[0] != $(this).next().attr('id').split('-')[0])
                {
                    $('.option').each(function(){
                        $(this).removeClass('option');
                    });
                    AddDivs('c')
                    GenerateIDs();
                    $(this).removeClass('option').removeClass('blank').addClass('object');
                    //$(this).next().addClass('option');
                    $('.object').each(function(){            
                        if($('#' + $(this).attr('id').split('-')[0] + '-' + (parseInt($(this).attr('id').split('-')[1]) + 1)).hasClass('blank'))
                            $('#' + $(this).attr('id').split('-')[0] + '-' + (parseInt($(this).attr('id').split('-')[1]) + 1)).removeClass('blank').addClass('option');
                        if($('#' + (parseInt($(this).attr('id').split('-')[0]) + 1) + '-' + $(this).attr('id').split('-')[1]).hasClass('blank'))
                            $('#' + (parseInt($(this).attr('id').split('-')[0]) + 1) + '-' + $(this).attr('id').split('-')[1]).removeClass('blank').addClass('option');
                    });
                }
            });

            // Adds row if type = r, column if type = c
            function AddDivs(type){
                if(type == 'r')
                {
                    canvas_height += 62;
                    $('#canvas').children('div').each(function(){
                        if($(this).position().top == $('#canvas div:first-child').position().top)
                            $('#canvas').append('&lt;div class="blank"&gt;&lt;/div&gt;');
                    });
                    $('#canvas').css('height', canvas_height + 'px');
                }
                if(type == 'c')
                {
                    canvas_width += 62;
                    $('#canvas').children('div').each(function(){
                        if($(this).position().left == $('#canvas div:first-child').position().left)
                            $('#canvas').append('&lt;div class="blank"&gt;&lt;/div&gt;');
                    });
                    $('#canvas').css('width', canvas_width + 'px');
                }                    
            }
        });
    &lt;/script&gt;
    &lt;style&gt;
        #canvas, #toolbox {float:left; height:124px; margin:25px; padding:5px; width:124px;}
        .blank {background-color:gray;}
        .start {background-color:green;}
        .object {background-color:blue;}
        .option {background-color:yellow;}
        body div {border:1px solid black;}
        body div div {float:left; height:50px; margin:5px; width:50px;}
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="toolbox"&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;        
    &lt;/div&gt;
    &lt;div id="canvas"&gt;
        &lt;div class="start"&gt;&lt;/div&gt;
        &lt;div class="option"&gt;&lt;/div&gt;
        &lt;div class="blank"&gt;&lt;/div&gt;
        &lt;div class="blank"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;br /&gt;&lt;br /&gt;
    &lt;div style="background-color:#AAAAAA; clear:left;"&gt;
        &lt;input id="btnID" type="button" value="Generate IDs" /&gt;
        &lt;input id="btnAddRow" type="button" value="Add Row" /&gt;
        &lt;input id="btnAddCol" type="button" value="Add Col" /&gt;
         - LEGEND:
        &lt;span style="color:green; font-size:20px; font-weight:bold;"&gt;START&lt;/span&gt;
        &lt;span style="color:yellow; font-size:20px; font-weight:bold;"&gt;OPTION&lt;/span&gt;
        &lt;span style="color:blue; font-size:20px; font-weight:bold;"&gt;OBJECT&lt;/span&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;​
</code></pre>

<p>(and here is a jsFiddle of it in operation; <a href="http://jsfiddle.net/DUCY3/1/" rel="nofollow">http://jsfiddle.net/DUCY3/1/</a>)</p>

<p>Basically in the long term it should continue to add columns/rows when you click the yellow. But it's not even sensing the click event the second time. Not sure why. Thanks.</p>
