Edit in JSFiddle

$(function(){
    $('.log span').text( $('.target').data('datakey') );
    
    $('.get-data').click(function() {
        var datakey = $('.target').data('datakey'); // get data attribute
        $('.log span').text( '[get] ' + datakey );
    });
    $('.set-data').click(function() {
        $('.target').data('datakey', 'abc'); // set data attribute = 'abc'
        var datakey = $('.target').data('datakey');
        $('.log span').text( '[set] ' + datakey );
    });
    $('.set-data2').click(function() {
        $('.target').data('datakey', '123'); // set data attribute = '123'
        var datakey = $('.target').data('datakey');
        $('.log span').text( '[set] ' + datakey );
    });
});

<div class="target well" data-datakey="default-val">.target element with data attribute</div>
<div class="form-actions btn-toolbar">
    <span class="btn get-data">get data attr</span>
    <span class="btn set-data">set data attr = 'abc'</span>
    <span class="btn set-data2">set data attr = '123'</span>
</div>
<div class="log">data value: <span class="label label-info"></span></div>