Add a div above the text box without changing the position of the text box

Question

Add a div above the text box without changing the position of the text box

I need to add some HTML content (images, tags, etc.) above a table cell containing a text box. Each row will have at least 10 rows per page with 8 columns. All 8 columns contain a text field.

I have already compiled several jQuery that will show and hide this new content area above the table cell, but the CSS is incorrect and the input fields are pressed ... The content area that I refer to is the addition of a DIV jQuery plugin with the inputbanner class.

CSS

.inputbanner
{
    background-color: Orange;
    position: absolute;
    top: -20px;
    display: none;
}

HTML

<tr>
    <td class="itemdescr">
        SWR: 1123 My Biggest Project
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox" />
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
    <td>
        <input type="text" maxlength="2" class="timebox"/>
    </td>
</tr>
<script language="javascript">
    $().ready(function() {
        $('.timebox').inputmenu();
    });
</script>

JQuery function

(function($) {
    $.fn.inputmenu = function() {
        function createInputMenu(node) {
            $(node).bind('focus', function() {
                $(this).parent().toggleClass('highlight');
                $(this).prev('div.inputbanner').toggle();
            });
            $(node).bind('blur', function() {
                $(this).parent().toggleClass('highlight');
                $(this).prev('div.inputbanner').toggle();
            });
            $(node).parent().prepend('<div class="inputbanner"><img src="../../Content/Images/arrow_left_active.gif" />&nbsp<img src="../../Content/Images/arrow_left_inactive.gif" /></div>');
        }
        return this.each(function() {
            createInputMenu(this);
        });
    }
})(jQuery);