Dynamic table droppable TD

Question

I am building a dynamic table. I want one of the columns in the table to be droppable. Following is my code. Problem in my code is that the entire TR is becoming droppable. Please help

$.each(obj, function (i, val) {
operation1 = $("<tr><td>" 
+ obj[i].Operation + "</td>" 
+ "<td>" + obj[i].OperationName 
+ "</td>" + "<td>" + "" + "</td>" + "<td>" + "" 
+ "</td><td><div class='droppable' id='op" + count 
+ "'></div></td></tr>");

$('#MainStepsTR').append(operation1);
operation1.droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function (event, ui) {
        $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
     },
    accept: function (dropElem) {
        return ($(dropElem).hasClass("ui-state-default"));
    }
});
operation1 = "";
count += 1;
});

<table class="OperationsTbl">
    <tr class="Header">
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Droppable Column</th>
    </tr>
    <tbody id="MainStepsTR"></tbody>
</table>

Answer 1

Ok, the anwer is that i had to bind the droppable event to the class selector

$(".droppableitem").droppable({