Кнопка HTML не появляется после нажатия

Question

Как вы можете видеть here, когда вы нажимаете кнопку «METAR» один за другим, предыдущая кнопка появляется, когда нажимается следующая.

Однако, когда вы нажимаете кнопку «Всего пользователей в сети по VATSIM», а затем одна из кнопок «METAR», кнопка «Всего пользователей в сети по VATSIM» не появляется снова.

Мой код находится в this Pastebin.

JavaScript для «Всего пользователей Интернет на VATSIM» кнопки выглядит следующим образом:

<script type="text/javascript"> 
$(document).ready(function() { 
var userButtons = $('.getUserButtons'); 
userButtons.click(function(){ 
var clickedButton = $(this); 
     $.ajax({ 
      type: "POST", 
      url: "/online.php", 
      dataType: 'html', 
      success: function(data) { 

       $('#outputDiv').hide('slow', function() { 
        $(this).remove(); 
       }); 

       userButtons.show('slow'); 

       var outputElement = $('<div id="outputDiv" style="color: white;">' + data + '</div>'); 
       outputElement.hide(); 
       outputElement.insertAfter(clickedButton); 

       clickedButton.hide('slow', function() { 
        outputElement.show('slow'); 
       }); 
      }, 
      error: function(jqXHR) { 
       alert(jqXHR.responseText); 
      } 
     }); 
    }); 
}); 
</script> 

код для кнопки сама выглядит следующим образом:

<li><button style="height: 40px;" class="btn btn-primary getUserButtons hvr-float-shadow">Total Users Online on VATSIM</button></li> 

Любая помощь будет оценена. Мне кажется, мне нужно отредактировать код, чтобы щелкнуть по одной из кнопок «METAR», чтобы снова появиться «Total Users Online on VATSIM»; Однако я не знаю, как это сделать.

Спасибо!

Answer 1

Наконец исправили проблему. Вот он:

script type="text/javascript"> 
$(document).ready(function() { 

    var metarButtons = $('.getMetarButtons'); 
    var userButtons = $('.getUserButtons'); 

    metarButtons.click(function(){ 
     var clickedButton = $(this); 
     $.ajax({ 
      type: "POST", 
      url: "metarData.php", 
      data: { location: clickedButton.attr('data-location') }, 
      dataType: 'json', 
      success: function(data) { 

       $('.metarOutput').hide('slow', function() { 
        $(this).remove(); 
       }); 

       $('#outputDiv').hide('slow', function() { 
        $(this).remove(); 
       }); 

       metarButtons.show('slow'); 
       userButtons.show('slow'); 

       var outputElement = $('<div id="outputDiv"' + data['location'] + ' style="color: white;" class="metarOutput">' + data['metar'] + '</div>'); 
       outputElement.hide(); 
       outputElement.insertAfter(clickedButton); 

       clickedButton.hide('slow', function() { 
        outputElement.show('slow'); 
       }); 
      }, 
      error: function(jqXHR) { 
       alert(jqXHR.responseText); 
      } 
     }); 
    }); 
}); 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 

    var metarButtons = $('.getMetarButtons'); 
    var userButtons = $('.getUserButtons'); 

    userButtons.click(function(){ 
     var clickedButton = $(this); 
     $.ajax({ 
      type: "POST", 
      url: "online.php", 
      dataType: 'html', 
      success: function(data) { 

       $('.metarOutput').hide('slow', function() { 
        $(this).remove(); 
       }); 

       $('#outputDiv').hide('slow', function() { 
        $(this).remove(); 
       }); 

       metarButtons.show('slow'); 
       userButtons.show('slow'); 

       var outputElement = $('<div id="outputDiv" style="color: white;">' + data + '</div>'); 
       outputElement.hide(); 
       outputElement.insertAfter(clickedButton); 

       clickedButton.hide('slow', function() { 
        outputElement.show('slow'); 
       }); 
      }, 
      error: function(jqXHR) { 
       alert(jqXHR.responseText); 
      } 
     }); 
    }); 
}); 
</script> 

Answer 2

добавить класс getMetarButtons к Всего пользователей Интернет на VATSIM, а