自定义选择下拉，无法选择用户添加的项目

所以我有这个自定义下拉选择，我正在构建。它有一些嵌套的项目在那里，作为第一个选项，用户可以创建自己的项目。我已经让它工作了，所以他们可以点击它，在那里输入，一旦他们按下回车键，它就会被选中。我不明白的是，在他们创建了一个项目之后，他们选择了其他项目，他们无法返回选择新创建的项目。希望这讲得通。这里是jsfiddle https://jsfiddle.net/johnsonjpj/18zm9kwz/2/

这是脚本的一部分，我使用它将添加按钮更改为输入，然后将该数据替换回列表。

$(document).ready(function() {

    $('body').on('click', '.addBtn', function(){
      var $el = $(this).parent('.newInner');
      var $input = $('<input type="text" class="form-control">');
        $input.attr('placeholder', 'Enter your category name and press "Enter"');
//    <span class="btn btn-default btn-xs"><i class="fa fa-check" aria-hidden="true"></i></span>
      $el.replaceWith( $input );
      var save = function(){
        var $p = $('<span class="catName" />').text( $input.val() );
        $input.replaceWith( $p );
        $('.category-active').removeClass('category-active');
        $('.addNew').removeClass('addNew').addClass('list-group-item category-active');
        $('#categoryPlaceholder').attr('value', $input.val());

        var container = $(".list-group.list-group-root");
        container.hide();
        $('.category-select').removeClass('category-open');
      };
      $input.one('blur', save).focus();
        $input.keypress(function (e) {
             var key = e.which;
             if(key == 13)  // the enter key code
              {
                save();
              }
        });   
    });
});