I have 2 button, but I made this 1 display button maybe like same toggle button. This program will be implement to CI for insert data(as input booking) and update data(as cancel just update column is_booking = 0). This example image.
So, I want this button not change at refresh web or reload. Help me please :).
function toggle1(){
document.getElementById("input2").removeAttribute("class");
var x = document.getElementById("input1");
var y = document.getElementById("input2");
x.style.display = "none";
y.style.display = "flex";
}
function toggle2(){
var x = document.getElementById("input1");
var y = document.getElementById("input2");
x.style.display = "flex";
y.style.display = "none";
}
.hidden{ visibility: hidden;
<!DOCTYPE html>
<html>
<body>
<h2>Button 2 in 1</h2>
<button type="submit" id="input1" onclick="toggle1()">Button 1</button>
<button type="button" id="input2" class="hidden pucek" onclick='toggle2()'>Button 2</button>
</body>
</html>