Как взять содержимое из текстового поля и поместить его в переменную и div в JavaScript

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

Пример:

Скажем, у меня три человека на моем сайте, они вводят содержимое в текстовое поле. Нажать на кнопку. Я хочу, чтобы содержимое из текстового поля было размещено в первой доступной переменной, а также в конкретный div с именем "promoted". Так что скажите, что Джон, Джим, Джейк все на моем сайте, Джон набирает "google.com" и нажимает submit. Я хочу, чтобы "google.com" помещался в первую переменную и в div, отображая ее на веб-сайте. Затем Джим называет "stackoverflow.com" в текстовом поле и нажимает submit, я хочу, чтобы "stackoverflow.com" был помещен во вторую переменную и в div, отображая его на веб-сайте ниже "google.com". Джейк вводит "yahoo.com" в текстовое поле и нажимает submit. Я хочу, чтобы третья переменная была "yahoo.com", и она помещалась в div, отображая ее на веб-сайте ниже "google.com" и "stackoverflow.com". Когда все пять переменных заполнены, я хочу, чтобы следующий контент был отправлен на замену первого. Я надеюсь в этом есть смысл.

Код, который я пробовал:

function promote() {
    $(this).parent().parent().find('input').each(function() {
        $(this).replaceWith('<div class="promoted"><a href="' + $(this).val() + '">' + $(this).val() + '</a></div>');
    });
}