Tags trouble

by Asle Gundersby

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>

<h3>Scenes: </h3>
   
<div id="listAccordion" class="accordionDefault">              
    <div id="accordion" data-bind="jqAccordion: { target: '#paccordion' },template: { name: 'scene-template', foreach: visibleScenes,  afterAdd: function(elem){$(elem).trigger('valueChanged');} }" class="group ui-widget ui-helper-clearfix"></div>    
</div>

<hr>

<h3> Status:</h3>   
<div class="tag-container"> <!-- TAGS BEGINS -->                                 
    <div class="wysLabel tagheader">
        <img class="ui-icon ui-icon-tag" align="left" alt="tags" style="cursor: pointer; cursor: hand;" />
        <label>projectSceneTagsPure:</label> 
    </div>
    <div class="tag-table">
        <div class="tag-list" data-bind="sortable:{template:'tagsTmpl',data:$root.projectSceneTagsPure, allowDrop:true,options:{update:$root.onUpdate}}"></div>
    </div>
</div> <!-- TAGS ENDS --> 
    
<hr/>
    
<div class="tag-container"> <!-- TAGS BEGINS -->                                 
    <div class="wysLabel tagheader">
        <img class="ui-icon ui-icon-tag" align="left" alt="tags" style="cursor: pointer; cursor: hand;" />
        <label>projectSceneTags:</label> 
    </div>
    <div class="tag-table">
        <div class="tag-list" data-bind="sortable:{template:'tagsTmpl',data:$root.projectSceneTags, allowDrop:true,options:{update:$root.onUpdate}}"></div>
    </div>
</div> <!-- TAGS ENDS --> 

                    
    <!-------------------------------------------------------------- scene-template: begin --------------------------------------------------------->
<!-- <div id="template-load"></div> -->
<script type="text/html" id="scene-template"><div data-bind="attr: {'id': 'scene' + sceneID}" class="group">
            <div class="accordion-header" data-bind="css: {'chapter': isChapter() },...

CSS

body {
    font-family: arial;
    background: lightgrey;
}
p, a, input {
    font-size: .8em;
}
.ko_container {
    border: 2px solid #ff8000;
    text-shadow: none;
    min-height:22px;
    background: #999;
}

.tag-container {
    width: auto;
    height: auto;
    margin-top: 5px;
    margin-left: 0px;
    padding: 0px;
    /*border: none;*/
}
.tag-container h3 {
    text-align: left;
    font-weight: bold;
    margin-bottom: 4px;
}
.tag-container input.taginput {
    float: right;
    position: relative;
    background: lightyellow;
    font-size: 10px;
    min-width: 20px;
    width: auto;
    max-width: 80px;
    margin: 0px 1px 2px 10px;
    border: 1px solid grey;
    padding: 1px;
    color: black !important;
}
.tag-table{
   /*background-color: #777;*/ 
    margin: -2px;
    padding: 1px;
    border-radius: 0px;
}
.tag-list {
    height: auto;
    margin: 1px;
    padding: 1px;
    overflow-y: auto;
    clear: both;
}
.tag {
    float: left;
    /*background-color: #444;*/
    background-color: #efefef;
    color: #444;
    font-size: 11px;
    font-weight: 600;
    border-radius: 2px;
    margin: 1px;
    padding: 2px 4px;
    cursor: move;
    white-space: nowrap;
}
.tag .tag-action {
    /* width: 11px;
    height: 11px; */
    width: 0.5em;
    cursor: pointer;
    text-align: center;
   /* vertical-align: middle;*/
    font-size: 11px;
}
.tag .tag-action {
    color: lime;
    font-size: 10px;
}
.tag.selected .tag-action { /* Tomalak css */
    color: red;
    font-weight:400;
    vertical-align: top;
}

.tag-action.remove { /* ASG 2015 css */
    color: yellow;
    font-weight:600;
}
.tag-action.remove.internal{ /* ASG 2015 css */
    color: red;
    color: #444;
    font-weight:600;
}
.tag-action.textbatch { /* ASG 2015 css */
    color: white;
    font-weight:600;
}
/* coloring of tabs*/

.tag.character {
    background-color: #90b7fe; /* blue-ish */
    background: -moz-linear-gradient(center top, #90b7fe, #a3c2fa) repeat scroll 0% 0%...

JavaScript

(function () {
    var ITEMKEY = "ko_sortItem",
        INDEXKEY = "ko_sourceIndex",
        LISTKEY = "ko_sortList",
        PARENTKEY = "ko_parentList",
        DRAGKEY = "ko_dragItem",
        unwrap = ko.utils.unwrapObservable,
        dataGet = ko.utils.domData.get,
        dataSet = ko.utils.domData.set;

    //internal afterRender that adds meta-data to children
    var addMetaDataAfterRender = function (elements, data) {
        ko.utils.arrayForEach(elements, function (element) {
            if (element.nodeType === 1) {
                dataSet(element, ITEMKEY, data);
                dataSet(element, PARENTKEY, dataGet(element.parentNode, LISTKEY));
            }
        });
    };

    //prepare the proper options for the template binding
    var prepareTemplateOptions = function (valueAccessor, dataName) {
        var result = {},
            options = unwrap(valueAccessor()),
            actualAfterRender;

        //build our options to pass to the template engine
        if (options.data) {
            result[dataName] = options.data;
            result.name = options.template;
        } else {
            result[dataName] = valueAccessor();
        }

        ko.utils.arrayForEach(["afterAdd", "afterRender", "as", "beforeRemove", "includeDestroyed", "templateEngine", "templateOptions"], function (option) {
            result[option] = options[option] || ko.bindingHandlers.jqAccordion[option];
        });

        //use an afterRender function to add meta-data
        if (dataName === "foreach") {
            if (result.afterRender) {
                //wrap the existing function, if it was passed
                actualAfterRender = result.afterRender;
                result.afterRender = function (element, data) {
                    addMetaDataAfterRender.call(data, element, data);
                    actualAfterRender.call(data, element, data);
                };
            } else {
                result.afterRender = addMetaDataAfterRender;
  ...