JQuery not getting correct width

Question

I've used this script to get a width and then apply it to the same element:

$(document).ready(function(){                
    $(".equal-height").each(function(){
        var slideSize = $(this).outerWidth();

        console.log(slideSize);

        $(this).css({ "height" : slideSize + "px" });
    });                
});

However, for some reason, there are elements that sometimes don't get a matching width and height. As you can see in this fiddle: https://jsfiddle.net/cpfgtuzo/5/ the last element has the correct dimensions, but the rest are all higher than their width. I'm trying to get them all to be square and I need to support old browsers too.

This only seems to be an issue when the size of the window is smaller and the four items stack in into a 2 column.

Answer 1

After your comments on other answer,

I've got numerous elements on the page that use this script and not all are the same size (there are smaller sets of squares too)

And

but the resulting box isn't coming out square. If you inspect your fiddle, the boxes are ~10px too tall

This solution seems to overcome those problems, Let me know if this helps, Working Fiddle

$(document).ready(function () {
    $(".equal-height").each(function () {
        var slideSize = $(this).outerWidth();

        console.log(slideSize);

        $(this).css({ "height": slideSize + "px", "width": slideSize + "px" }); 
        //setting the width along with height
    });                
});