I have JS code that grabs the magnetic direction and outputs in text the number in degrees. That works fine. But I want to make it visual, a pointer that rotates according to that number.

I have a div containing an SVG graphic (N with a vertical arrow). I use this code to rotate it:

Code:
    function onSuccess(heading) {
        var element = document.getElementById('heading');
        element.innerHTML = 'Heading: ' + heading.magneticHeading; // this shows an integer; updates every 3 seconds
        
        var north = document.getElementById("heading2");
        north.style = "-webkit-transform:rotate(" + magneticHeading + ")"; // this remains stationary instead of rotating
    }
How do I get the div or graphic in it to rotate? How do I get it to continue rotating on update?