Динамический текст меняет положение диапазона

У меня есть диапазон, который имеет предопределенное значение, которое инициируется при загрузке страницы. Пользователь может изменять значения, взаимодействуя с полем ввода. Моя проблема в том, что все промежутки находятся в таблице, и всякий раз, когда число изменяется вместо того, чтобы появляться в том же месте, что и предопределенное число, оно позиционирует себя как 20 пикселей или около того.

Любая помощь будет оценена.

HTML

<table class="tbl1">
    <tr>
        <td style="overflow: hidden; width: 280px; text-align: left; valign: top"><span class="Cs boxGreen">A</span>
        </td>
        <td width="18%"><span class="number1Output"></span>
        </td>
    </tr>
</table>

JS

var currency = "£";

(function ($) {
    $(window).load(function () {
        $('.number1Output').html($('#number1').val());
    });
});

function displayNumber(value, id, id2) {
    var output = '.' + id + "Output";
    if (value == 0) {
        $(output).html('');
        $(id2).html("free");
    } else {
        $(output).html('+' + value + currency + ' ');
        $(id2).html(value + currency);
    }
}