Невозможно установить соединение - источник не существует

Question

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

После подключения, если пользователь удовлетворен, он / она может сохранить его,

всесохранено правильно, как я хочу, теперь, когда пользователь перезагрузит страницу соединения, например, (con_6, con_18) не отображаются.

Здесь json, где сохранены данные.

{
    "movies": [
        {
            "left": 237,
            "top": 99,
            "movieid": "51"
        },
        {
            "left": 241,
            "top": 263,
            "movieid": "10"
        },
        {
            "left": 746,
            "top": 184,
            "movieid": "12"
        }
    ],
    "connections": [
        {
            "buttonid": "0",
            "movieid": "12"
        },
        {
            "buttonid": "4",
            "movieid": "12"
        }
    ]
}

Вот моя функция для загрузки моих соединений

$.getJSON('datasaved/settings2.json', function (data) {

        var flowchartconnection =data.connections;

        for( var j = 0; j < flowchartconnection.length; j++ ) {

            console.log(flowchartconnection[j].buttonid);

            jsPlumb.connect({ source: flowchartconnection[j].buttonid, target: flowchartconnection[j].movieid });
            console.log(jsPlumb.connect);


        }


    });

К сожалению, я получаю следующую ошибку:

Невозможно установить соединение - источникне существует.

Вот демонстрационная версия: Демоверсия

Вот документация по функциям js plumb connect: js plumb connect

Вот мой console.log из моего живого демо: живое демо

Как вы можете видеть наконсоль, исходный и целевой идентификаторы доступны в DOM до того, как произойдут соединения,

Подскажите, пожалуйста, что я делаю не так?