Петр

.owl-controls {
    display: none;
}

В первом варианте coord у вас является локальной переменной.
А во втором варианте вы перекрываете глобальную coord, локальной.

document.addEventListener("mousemove", function( ---> coord <---- )

Удалите выделенное и будет вам счастье

$('.j-tabs-btn').on('click', function(){
    if ($(this).is('.active')) return;
    $('.j-tabs-btn').removeClass('active');
    $(this).addClass('active');
    console.log('not active');
});

Для такой задачи лучше использовать XMLHttpRequest
Пример:

var form = av.closest('form')[0];
var xmlhttp = new XMLHttpRequest();
xmlhttp.open(form.method, form.action, true);
xmlhttp.onreadystatechange = function(){
            if (xmlhttp.readyState == 4){
                if (xmlhttp.status == 200){
                    xmlhttp.responseText;
                } else {
                    // empty
                }
            }
        };
xmlhttp.send(new FormData(form));

Переменный в локальном скоупе всегда обьявляются через var.
Тут обьявлена глобальная переменная

Так разницы то и нет. В обоих случаях обычный сетевой запрос.
Да и PHP это серверный код, а ajax клиентский.

if ($(e.target).parents().filter(menuelement).length){
  ...
}

Получаем множество элементов, что являются родительскими для элемента на котором был click и в этом множестве проверяем наличие нужного вам.

Так напишите свой, минут 30 на реализацию

function OnAutoCompleteTimeEvent(){
    window.MyAccountInputHandle = 0;
    var inpnat = window.MyAccountInput;
    var inp = $(inpnat);
    var txt = inp.val();
    if (txt.length >= 3){
        var fn = function(data){
            var drop = $('#input_drop_area');
            drop.empty();
            $.each(data, function(idx, value){ $('<li />').html(value).appendTo(drop); });
            ShowAutoCompleteBlock(drop, data.length);
            if (data.length){
                drop.data('input', inpnat);
                var xy = inp.offset();
                drop.offset({ left: xy.left, top: xy.top + inp.outerHeight() });
                drop.width(inp.outerWidth());
            }
        };
        $.getJSON(inp.attr('auto-complete-ex'), { q: txt }, fn);
    }
}
function OnKeyUpForAutoComplete(){
    if (window.MyAccountInputHandle){
        clearTimeout(window.MyAccountInputHandle);
        window.MyAccountInputHandle = 0;
    }
    window.MyAccountInputHandle = setTimeout(OnAutoCompleteTimeEvent, 600);
    window.MyAccountInput = this;
}
function OnSelectAutoCompleteItem(){
    var li = $(this);
    var ul = li.closest('ul');
    var inp = $(ul.data('input'));
    inp.val(li.text());
    ul.hide();
}
$(function(){
    var usac = $('#user-account');
    usac.on('keyup', 'input[auto-complete-ex]', OnKeyUpForAutoComplete);
});

<ul id="input_drop_area" style="display:none;"></ul>

#input_drop_area{
    position: absolute;
    background-color: #fff;
    list-style: none;
    padding-left: 0;
    margin: 0;
}
#input_drop_area li{
    padding: 5px;
    cursor: pointer;
}
#input_drop_area li:hover{
    background-color: #cecece;
}

JQuery тут не поможет, а вот обычный javascript + сообразительность помогут.
Берете точки одного svg, это все придется самому рассчитать, второго и последовательно перестраиваете основной svg продвигаясь к виду второго.
Только так