Пользовательский интерфейс Jquery: выбор выбираемого

Я создаю приложение с помощью javascript, который извлекает изображения из S3 через AWS api. Я использовал jquery_ui для добавления избранных функций в приложение ui. В настоящее время я могу выбрать изображения, которые я загрузил через s3 в своей галерее, без проблем, на основе документации jquery ui. Однако у меня есть панель навигации боковой панели, которая позволяет мне выбирать имена файлов, и я хочу, чтобы изображение в галерее также отображалось.

Я пробовал $(#image-id).addClass('ui-selected') и различные итерации одной и той же концепции, но ничего не происходит.

Любые намеки на то, что я делаю неправильно? Я не могу претендовать на роль эксперта JS.

HTML:

<div class="right-container">
        <div class="sidebar">
            <input type="file" id="file-chooser" name="files[]" multiple />
            <button id="upload-button">Upload</button>
            <div id="results"></div>
            <ul id="objects"></ul>
        </div>

        <div class="navigation">
            <div id="item-status"></div>
            <ul id="selectable-items">
            </ul>
        </div>
    </div>

    <div class="main-container">
        <div class="content">
            <div id="image-status"></div>
            <ul id="selectable-images">
            </ul>
        </div>

        <div id="details">
            <ul id="properties"></ul>
        </div>
    </div>

Соответствующий JS для отображения изображений:

// Display images from s3
$(document).ready(function(){
function listImages(){
    s3.listObjects(function (err, data) {
        if (err) {
            $('#image-status').html('Could not load objects from S3');
        } else {
            $('#image-status').html('<h3>Loaded ' + data.Contents.length + ' images from ' + bucket + '.</h3>');
            for (var i = 0; i < data.Contents.length; i++) {
                $('#selectable-images').append("<li><img id=" + data.Contents[i].Key + " src='" + origin + bucket + "/" + data.Contents[i].Key + "'>" + "</img></li>");
            }
        }
    });
}

// Selectable images
$( "#selectable-images" ).selectable({
    filter: "img",
    selected: function(event, ui) {
// Get image properties
        if($(ui.selected).attr('id') != null) {
            var file = $(ui.selected).attr('id');
            selected_image = {Key: file};
        }

// Display image properties
        s3.headObject(selected_image, function(err, data) {
            if(err) {
                console.log(err, err.stack)
            } else {
                properties = data
            }
            $('#properties').html("<li>Key: " + $(ui.selected).attr('id') + "</li> " + "<li>Content Type: " + properties.ContentType + "</li> " + "<li>Last Modified: " + properties.LastModified + "</li>")
        });
    }
});
});

JSBin: http://jsbin.com/fodovoko/2/edit?html,css,js,console,output