Остановите jQuery от замены ключей и значений, которые уже существуют в localStorage

Моя заявка работала как ожидалось, пока я не добавил метод DELETE элементов, хранящихся в localStorage.

У меня есть этот HTML-код, который принимает строку:

<div>
    <div ><input type="text" id="manuallyName" name="manuallyName" placeholder="Medicine Name, Strength & Form..." /></div>
        <div class="ui-grid-a" style="padding:15px;">
            <div class="ui-block-a"><input id="manualClear" type="Button" data-icon="delete" data-iconpos="left" value="Cancel" /></div>
            <div class="ui-block-b"><input id="manuallyAdd" type="button" data-icon="cross" value="Add" /></div>
        </div>
</div>

и когда нажата кнопка "Добавить", вызывается следующий скрипт:

$(document).ready(function () {
        $('#manuallyAdd').click(function () {
            if ($("#manuallyName").val() != "") {

                var length = storage.length;
                var number = storage.length;

                if (length >= number) {
                    number++;
                    var key = "Medicine" + number.toString();
                    var value = $("#manuallyName").val();
                    storage.setItem(key, value);
                }

                    document.getElementById("manuallyName").value = "";
                    return true;
            }
            else {
                alert('Please Provide Medicine Name')
                return false;
            }
        })
    });

Этот скрипт работает нормально, он в основном проверяет длину хранилища и создает ключи в соответствии с размером хранилища и просто добавляет содержимое textfield в значение и сохраняет его.

Сохраненные элементы затем отображаются в виде listview с id="medList" другим сценарием. (Я не буду добавлять скрипт, чтобы сэкономить место, но при необходимости прокомментируйте, и я добавлю его).

Следующий сценарий - это тот, который заботится об удалении элементов из listview и localStorage:

$('ul').on('click', '.del', function (el) {
    $(this).closest('li').remove();
    var key = $(this).attr('key');
    localStorage.removeItem(key);
    $('ul.medList').listview('refresh');
});

Он берет "ключ", который хранится в listview и удаляет его соответствующим образом.

Теперь моя проблема зависит от того, когда элемент удален из localStorage ключи становятся несовместимыми и когда $('#manuallyAdd').click(function() вызывается снова, он будет считать все, и если аналогичный ключ уже существует, он заменит это (и трагически мне это не нужно).

Позвольте мне объяснить, например:

У меня есть следующее:

Key = Medicine1 - Value = a
Key = Medicine2 - Value = b
Key = Medicine3 - Value = c

В списке вышеперечисленного Medicine2 удаляется, оставляя только Medicine1 и Medicine3.

Когда я попытаюсь добавить еще одну "Медицину", я бы ожидал появления Key = Medicine4 - Value = New Medicine но вместо этого она хранится в Medicine3, избавляясь от старой ценности и сохраняя новую.

Я считаю, что это связано с тем if statement что у меня есть, и я, кажется, не нахожу или не работаю с другим методом, который предоставит мне правильное решение.

Я попробовал добавить инструкцию, которая проверяет, существует ли ключ и предоставляет другой ключ, но это работает только до тех пор, пока другой элемент не будет удален из списка.

Любые указатели или идеи были бы весьма признательны.

Извините за длинный вопрос, но я попытался изо всех сил объяснить это. Если что-то еще неясно, пожалуйста, дайте мне знать.