JQuery Button Data Returning As Null?

I have a button and when I click it, I want the html object (aka button) to be passed as a parameter to another javascript function. I want the javascript function to print the data-hi from the element in the button.

HTML BUTTON

<button type = "button" onclick = "whoIsRdns(this)" class="dns-information btn btn-xs btn-info pull-right" data-toggle="modal" data-target = "#whois_rdns_modal" data-path="{{ path( '_who_is_rdns', { 'peer': peer.number, 'ip': peer.mac } ) }}" data-hi = "hi2">
<i class="icon-search"></i>
</button>

JS FUNCTION(W/ JQUERY)

    function whoIsRdns(thisButton){

    //Enable jQuery properties from the param of the HTML object
        var btn = $(thisButton);

        var test = btn.data('hi');
        console.log('Value is ' + test);

}

Why would test return as null?