Странное поведение при включении / выключении щелчка и jQuery?

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

1) Вам нужно дважды щелкнуть ссылку, чтобы повторно добавить кнопку и

2) Иногда я получаю несколько экземпляров добавленной кнопки в div.

Вот мой код:

var selections = ' ';
    function add_Button() {
      jQuery(".form-unselected").click(function (e) {
        jQuery(this).removeClass('form-unselected').addClass('selected').off('click');
        var title = jQuery(this).attr("title");
        var id = jQuery(this).attr("href");
        selections += title + ', ';
        var button_content = jQuery('<button class = "content-button">').html(title).attr("title", title).attr("id",id);
        event.preventDefault();
        $( "#selected-items" ).append(button_content);
        console.info(selections);
      });
    }
    add_Button();
    jQuery(document).on('click','.content-button', function(e){
      var removed_content = jQuery(this).attr("title") + ', ';
      selections =  selections.replace(removed_content,'');
      var href = jQuery(this).attr("id");
      jQuery(".add-to-form[href='"+ href +"']").addClass('form-unselected').removeClass('selected').on('click', add_Button );
      jQuery(this).remove();
      console.info(selections);
    });

Переменная выбора - это список значений, разделенных запятыми, для другой цели, но я тоже получаю дубликаты. Заранее спасибо!