使用jQuery更改单击按钮的显示

Question

我有两个这样的按钮：

<button type="button" data-toggle="entry" data-type="manual" class="pull-right btn btn-default btn-sm"><i class="fa fa-pencil"></i> Manual entry</button>

<button type="button" data-toggle="entry" data-type="auto" class="pull-right btn btn-default btn-sm hide"><i class="fa fa-pencil"></i> Automatic entry</button>

在单击其中一个按钮时，我要显示另一个按钮。

所以我的代码如下，但它不起作用：

$("button[data-toggle='entry']").on('click', function() {

    var active = $(this).data('type');

    if(active == 'auto') {
        $("button[data-type='auto']").removeClass('hide').addClass('show');
        $("button[data-type='manual']").removeClass('show').addClass('hide');
    }
    if(active == 'manual') {
        $("button[data-type='manual']").removeClass('hide').addClass('show');
        $("button[data-type='auto']").removeClass('show').addClass('hide');
    }
});

为什么？

https://jsfiddle.net/bry35xne/