diff --git a/css/history.css b/css/history.css
index 56084c34cb22eaa465637fb84ae23162a7a8fa99..281bd420e060a64eda4fa0a5a0cc5ffe067a1810 100644
--- a/css/history.css
+++ b/css/history.css
@@ -155,7 +155,7 @@ h1 {
 	margin-left: 15px;
 }
 
-.hide-button {
+.buttonHide {
 	background: red;
 	border: 0.5px solid black;
 	border-radius: 5px;
diff --git a/history-driver.html b/history-driver.html
index ac42ec0dafdaa36ef95d2fc18b244520057e7b44..340a350a9eec78d0580ea25c9928b18430b9b90d 100644
--- a/history-driver.html
+++ b/history-driver.html
@@ -26,9 +26,9 @@
             	<div class="submenu">MY PREVIOUS ORDERS</div>
             	<div class="submenu active">DRIVER HISTORY</div>
             </div>
-            <div class="listBox">
+            <div class="listBox" id="lisbox1">
             	<img src="img/profile-placeholder.png" alt="profile image" class="thumbnail">
-            	<div class="hide-button">HIDE</div>
+            	<button class="buttonHide" onclick="removeElement('lisbox1')">HIDE</button>
             	<div class="date">5 October 2017</div>
             	<div class="name">Elmo</div>
             	<div class="route">Magetan-Maospati</div>
@@ -39,9 +39,9 @@
                 </div>
 
             </div>
-            <div class="listBox">
+            <div class="listBox" id="lisbox2">
                 <img src="img/profile-placeholder.png" alt="profile image" class="thumbnail">
-                <div class="hide-button">HIDE</div>
+                <button class="buttonHide" onclick="removeElement('lisbox2')">HIDE</button>
                 <div class="date">3 October 2017</div>
                 <div class="name">Bert</div>
                 <div class="route">Magetan-Madiun</div>
@@ -50,5 +50,6 @@
             </div>
             
         </div>
+        <script src="js/history.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/history-order.html b/history-order.html
index faba981acca9079f49519c1004c3e34ca203bb41..d1ae307815397fea0b0f83425d7c63cdbacb1c9a 100644
--- a/history-order.html
+++ b/history-order.html
@@ -26,22 +26,22 @@
             	<div class="submenu active">MY PREVIOUS ORDERS</div>
             	<div class="submenu">DRIVER HISTORY</div>
             </div>
-            <div class="listBox">
+            <div class="listBox" id="lisbox1">
             	<img src="img/profile-placeholder.png" alt="profile image" class="thumbnail">
-            	<div class="hide-button">HIDE</div>
+            	<button class="buttonHide" onclick="removeElement('lisbox1')">HIDE</button>
             	<div class="date">5 October 2017</div>
             	<div class="name">Elmo</div>
             	<div class="route">Magetan-Maospati</div>
             	<div class="rating">You rated: </div>
             	<div class="comment">
                     <div>You commented:
-                    <p>tralalalala senang sekali</p></div>
+                    tralalalala senang sekali</div>
                 </div>
 
             </div>
-            <div class="listBox">
+            <div class="listBox" id="lisbox2">
                 <img src="img/profile-placeholder.png" alt="profile image" class="thumbnail">
-                <div class="hide-button">HIDE</div>
+                <button class="buttonHide" onclick="removeElement('lisbox2')">HIDE</button>
                 <div class="date">3 October 2017</div>
                 <div class="name">Bert</div>
                 <div class="route">Magetan-Madiun</div>
@@ -50,5 +50,6 @@
             </div>
             
         </div>
+        <script src="js/history.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/js/history.js b/js/history.js
new file mode 100644
index 0000000000000000000000000000000000000000..79e55e0ece5c45559340dc45bacf91181d602954
--- /dev/null
+++ b/js/history.js
@@ -0,0 +1,3 @@
+function removeElement(id) {
+    document.getElementById(id).style.display = "none";
+}
\ No newline at end of file