Dynamic table - auto-show

[MoteCL]

I have the following code where I edit the field of a row in a table, but I want it to be more Dynamic, that is, when editing a field it jumps to the next field where I will edit. I have a success function where I should jump to the next field to edit what the Item would be, but I do not know why it does not work.

<table id="table" class="table table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>Task</th>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
  <tr>
  <td>1</td>
  <td data-name="task" class="task" data-type="text">001</td>
  <td data-name="Item" class="Item" data-type="select">Item2</td>
  </tr>
    <tr>
  <td>2</td>
  <td data-name="task" class="task" data-type="text">002</td>
  <td data-name="Item" class="Item" data-type="select">Item1</td>
  </tr>
  </tbody>
</table>

Here my JavaScript

$('#table').editable({
        container: 'body',
        selector: 'td.task',
        title: 'task',
        type: "POST",
        showbuttons: false,
         type: 'text',
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Empty!';
            }
        },  
        success: function(response) {

           //CODE TO JUMP TO THE SELECT 
        }
    });
    var ITEM = [];
    $.each({
        "Item1": "Item1",
        "Item2": "Item2",
        "Item3": "Item3",
        "Item4": "Item4"
    }, function(k, v) {
        ITEM.push({
            value: k,
            text: v
        });
    });

    $('#table').editable({
        container: 'body',
        selector: 'td.Item',
        title: 'Item',
        type: "POST",
        showbuttons: false,
        source: ITEM,
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Empty!';
            }
        }
    });

I was looking the docs but still doesnt work