Javascript: переключить класс добавить или удалить

Что я собираюсь сделать, это:
Когда я нажимаю на кнопку почты, 1-ая таблица появляется и скрывает вторую таблицу, а когда нажимается кнопка подписчиков, 2-ая таблица должна появляться и скрывать 1-ю таблицу.
Но я сталкиваюсь с ошибками, например, когда я нажимаю 2-ю кнопку, она не будет скрывать 1-ую таблицу

<script>
function toggle_display(id){
if(id=='mails'){
document.getElementById('mails').classList.remove('hidden');
document.getElementById('subscribers').classList.add('hidden');
}
if(id=='subscribers'){
document.getElementById('mails').classList.add('hidden');
document.getElementById('subscribers').classList.remove('hidden');
}
}</script>

<a href="javascript:toggle_display('mails');"><input type="button" class="btn" value="Mails"/></a>
<a href="javascript:toggle_display('subscribers');"><input type="button" class="btn" value="Subscribers"/></a>

<div class="row well well-lg hidden" id="mails">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">Name</th>
<th class="col-sm-2">Email</th>
<th class="col-sm-2">Phone</th>
<th class="col-sm-2">Subject</th>
<th class="col-sm-3">Message</th>
</tr>
</table>
</div>

<div class="row well well-lg hidden" id="subscribers">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">ID</th>
<th class="col-sm-5">Email</th>
<th class="col-sm-3">Action</th>
</tr>
</table>
</div>