Не удается установить изображение в конечную точку jsPlumb

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

function changeEndpointImage(){
            var elem = $('.tableBody');   //These are my connectable elements
            for(var i=0;i<elem.length;i++)
            {
                 var eps=jsPlumb.getEndpoints($(elem[i]));  //Getting endpoints for each of the connectable elements
                 for(var j=0;j<eps.length;j++)
                 {
                      if(eps[j].connections.length!=0)  //Checking if any of them have connections
                           eps[j].setImage("images/styled_radiobutton.png");  //Setting another image
                 }
            }
        }
jsPlumb.bind("connection", function(connection) {
     changeEndpointImage();

     //I have also tried this method commented below, but nothing.
     //connection.sourceEndpoint.setImage("images/styled_radiobutton.png");
     //connection.targetEndpoint.setImage("images/styled_radiobutton.png");

});

Я также пытаюсь вернуть изображения конечных точек к первому виду, если соединение отключено, но в этом случае изменяется только исходная конечная точка, цель остается прежней:

jsPlumb.bind("connectionDetached", function(connection) {
    connection.targetEndpoint.setImage("images/rsz_styled_radiobutton.png");
    connection.sourceEndpoint.setImage("images/rsz_styled_radiobutton.png");
});

Что мне не хватает или как я могу решить эту проблему?

РЕДАКТИРОВАТЬ: Вот jsfiddle:

https://jsfiddle.net/vaxobasilidze/cg3hkde7/

Перетащите несколько элементов в правый div, нажмите «Добавить новую ссылку» и попробуйте подключить отсоединенные соединения. Вы увидите, что конечные точки не меняются.