Изменение состояния кнопок, активация одной, деактивация другой и наоборот

Question

У меня есть блог, где пользователи могут публиковать свои сообщения, другие пользователи, зарегистрированные на платформе, могут оценивать сообщения с как или неприязнь . У меня проблема с тем фактом, что если нажата кнопка , как , она также может нажать кнопку dislike , что не может сделать, это может нажимать только одну кнопку за раз, как или не нравится , а не оба. Как я могу это сделать?

Я использую Bootstrap Framework для HTML / CSS Стиль

Изображение, что я бы

Javascript:

   <script>
      window.onload = bindEvents;

      function bindEvents() {
        btn_events();
      }

      function btn_events() {

        $('.btn_like').click(function(){
          var row_id = $(this).attr("data-id4");
          console.log ('Pressed button LIKE with id'+row_id);
          /*other code to increment value of post with value = value + 1*/
        });

        $('.btn_dislike').click(function(){
          var row_id = $(this).attr("data-id5");
          console.log ('Pressed button DISLIKE with id'+row_id);
          /*other code to increment value of post with value = value + 1*/
        });
      }
    </script>

PHP:

    echo '<div class="post"><p data-id0="'.$row["id_post"].'" >'.$user['nome']." ".$user['cognome']." <span class='time'>".time_since(time() - strtotime($row['datetime']))." ago </span> </p>";
    echo '<p data-id1="'.$row["id_post"].'">'.$row['comune']."</p>";
    echo '<p data-id2="'.$row["id_post"].'">'.$row['indirizzo']."</p>";
    echo '<p data-id3="'.$row["id_post"].'">'.$row['descrizione']."</p>";
    echo '<button type="button" name="view_details" class="btn btn-success btn-xs btn_like" data-id4="'.$row["id_post"].'">LIKE</button>';
    echo '&nbsp;';
    echo '<button type="button" name="view_details" class="btn btn-danger btn-xs btn_dislike" data-id5="'.$row["id_post"].'">DISLIKE</button>';
    echo '</div>';