sloupok123

У вас при каждом клике на .font_family_z вешается новое событие $('#formFontFamily').on('submit', function(e){, . Те если вы накликали несколько раз на .font_family_z, а потом один раз нажали на #formFontFamily, то у вас форма отправится аяксом столько раз, сколько вы кликнули по .font_family_z

Присоединяюсь к предыдущему ответу и добавлю, у вас есть элемент в id = e. Как оказывается id должен содержать больше чем 1 символ, иначе в консоле вываливается ошибка.
Ваш скорректированный пример: https://jsfiddle.net/wbedmtp8/4/

В том месте в верстке, где вы кликаете по сотруднику, чтобы открылся попап, добавьте json строку в атрибут тега с информацией о конкретном сотруднике, например data-employe="ваш json". При клике на данного сотрудника вызываете один попап, спрятаный на странице и передавайте в него данный json с информацией о сотруднике, декодите его и вставляете в value нужных инпутов. Как-то так

Я использую такой метод определения.

var isMobile = {
    Android: function () {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function () {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function () {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function () {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function () {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function () {
        return (
                isMobile.Android()
                || isMobile.BlackBerry()
                || isMobile.iOS()
                || isMobile.Opera()
                || isMobile.Windows()
                );
    }
};

вызываем в нужном месте isMobile.any() и если вернуло true, то человек пришел с мобильного устройства

попробуйте пройтись функцией .each по каждому слайдеру, типо так: $('.slides').each(function(){//your code});