ColorPick Javascript Issue

In colorpick.js I can able to change the elements color but I am not able to change the border colors present in css. You can see here

This is the Colorpick Javascript code below:

 /* INITIALIZATION COLOURPICKER FOR ELEMENTS
    *********************************************/
    var newColorColorPickElements = $('.ftco-navbar-light, .btn.btn-primary, .bg-light, .sidebar');
    
    $('#pickerelementscolour').colpick({
        layout: 'hex',
        submit: 1,
        colorScheme: 'dark',
        onChange: function (hsb, hex, rgb, el, bySetColor) {
            $(el).css('border-color', '#' + hex);
            setNewColorUI(hex);
            if (!bySetColor) $(el).val(hex);
        }
    }).keyup(function () {
        setNewColorUI(this.value);
        $(this).colpickSetColor(this.value);
    });
    
    function setNewColorUI(newColor) {
        newColorColorPickElements.css('background', '#' + newColor);
        if (!(/Trident/7./).test(navigator.userAgent)) {
            if (localStorage.getItem('elementsColour') != newColor) localStorage.setItem("elementsColour", newColor);
        }
    }

please help me resolving this, thank you