     bucket_item_panel += variable_fields
     bucket_item_panel += """
                     <textarea class='panel-input'
-                              tabindex=#{3 + tab_index}
                               placeholder='notes'>#{bucket_item['notes']}</textarea>
                     #{move_to_button_or_empty}
                     <button type='button'
-                            class='btn btn-default panel-input after-move-to'
-                            tabindex=#{5 + tab_index}>
+                            class='btn btn-default panel-input'>
                         Save
                     </button>
                     <button id='last-input#{index}'
                             type='button' 
-                            class='btn btn-default panel-input'
-                            tabindex=#{6 + tab_index}>
+                            class='btn btn-default panel-input'>
                         Cancel
                     </button>
                 </div>
             </div>
         </li>
     """
-    tab_index = tab_index + 6
-    $('#sortable-bucket-item-list').append bucket_item_panel
-    first_input_index = "#first-input#{index}"
-    last_input_index = "#last-input#{index}"
-    $(last_input_index).focusout -> $(first_input_index).focus()
+    $('#sortable-bucket-item-list').append(bucket_item_panel)
+    panel_inputs = $('#panel' + index).find('.panel-input')
+    i = 0
+    for panel_input in panel_inputs
+        i_next = i + 1
+        if i_next >= panel_inputs.length then i_next = 0
+        panel_input.next_input = panel_inputs[i_next]
+
+        i_prev = i - 1
+        if i_prev < 0 then i_prev = panel_inputs.length - 1
+        panel_input.prev_input = panel_inputs[i_prev]
+
+        $(panel_input).keypress (e) ->
+            if get_hotkey_command(e) == '\t'
+                e.preventDefault()
+                if e.shiftKey
+                    console.log this.prev_input
+                    $(this.prev_input).focus()
+                else
+                    console.log this.next_input
+                    $(this.next_input).focus()
+
+        i++
 
 num_bucket_items = 0
 populate_bucket_items = (bucket) ->

$(document).on 'click', '.bucket-dropdown-head', ->
    current_dropdown_item = null

$(document).on 'focusout', '.panel-dropup-button', ->
    panel_dropup_parent = $(this).parent()
    if panel_dropup_parent.hasClass('open')
        console.log 'close!'
        panel_dropup_parent.find('#panel-dropdown').toggle()

$(document).on 'focus', '.panel-dropup-button', ->
    panel_dropup_parent = $(this).parent()
    if not panel_dropup_parent.hasClass('open')
        console.log 'open!'
        panel_dropup = panel_dropup_parent.find('#panel-dropdown')
        panel_dropup.toggle()
        current_dropdown_item = panel_dropup.children().last().find('a')
        current_dropdown_item.focus()
        
#TODO there is probably a better way to do this...
$(document).on 'focusout', '.panel-dropup > li > a', ->
    primary_panel.find('.after-move-to').focus()
    $(this).parent().parent().toggle()

#TODO initial dropdown population shouldn't be an ajax call
#TODO nor should it be tied to a hard-coded bucket name
#TODO maybe this should be done with partials that are rendered serverside on load

            <input id='first-input#{index}'
                   class='panel-input'
                   type='text'
                   value='#{bucket_item['first_name']}'
                   placeholder='first name'><br>
            <input class='panel-input'
                   type='text'
                   value='#{bucket_item['last_name']}'
                   placeholder='last name'><br>
        """
    bucket_item_panel = """
        <li  id='panel#{index}'
             class='panel panel-info'>
            <div class='panel-heading'
                 data-toggle='collapse'
                 data-parent='#accordion'
