How can I get my buttons to hide/display properly when I click them?

September 27, 2022

Hello i’m setting up an edit button that hides and displays my save and cancel button, but all of the buttons disappear when I click the edit button. It was working fine with my other buttons, but I’m not sure why this one isn’t. I also didn’t get an error when I clicked them. I have provided a snippet of my code. Thanks!

//Edit button click dropdown
$(document).ready(function () {

    //First Name Save
    $('#edit').on('click', function () {
        $(this).hide();
        $('#save, #cancel, #inputFirst').show();
    });
    $('#save').on('click', function () {
        $('#edit').show();
        $('#save, #cancel, #inputFirst').hide();
    });

    $('#cancel').on('click', function () {
        $('#edit').show();
        $('#save, #cancel, #inputFirst').hide();
    });

    //Last Name Save
    $('#edit2').on('click', function () {
        $(this).hide();
        $('#save2, #cancel2, #inputLast').show();
    });
    $('#save2').on('click', function () {
        $('#edit2').show();
        $('#save2, #cancel2, #inputLast').hide();
    });

    $('#cancel2').on('click', function () {
        $('#edit2').show();
        $('#save2, #cancel2, #inputLast').hide();
    });

    //Email Save
    $('#edit3').on('click', function () {
        $(this).hide();
        $('#save3, #cancel3, #inputEmail').show();
    });
    $('#save3').on('click', function () {
        $('#edit3').show();
        $('#save3, #cancel3, #inputEmail').hide();
    });

    $('#cancel3').on('click', function () {
        $('#edit3').show();
        $('#save3, #cancel3, #inputEmail').hide();
    });

    //Studio Name Save
    $('#edit4').on('click', function () {
        $(this).hide();
        $('#save4, #cancel4, #inputName').show();
    });
    $('#save4').on('click', function () {
        $('#edit4').show();
        $('#save4, #cancel4, #inputName').hide();
    });

    $('#cancel4').on('click', function () {
        $('#edit4').show();
        $('#save4, #cancel4, #inputName').hide();
    });

    //Phone Save
    $('#edit5').on('click', function () {
        $(this).hide();
        $('#save5, #cancel5, #inputPhone').show();
    });
    $('#save5').on('click', function () {
        $('#edit5').show();
        $('#save5, #cancel5, #inputPhone').hide();
    });

    $('#cancel5').on('click', function () {
        $('#edit5').show();
        $('#save5, #cancel5, #inputPhone').hide();
    });

    //Studio Address Save
    $('#edit6').on('click', function () {
        $(this).hide();
        $('#save6, #cancel6, #inputAddress').show();
    });
    $('#save6').on('click', function () {
        $('#edit6').show();
        $('#save6, #cancel6, #inputAddress').hide();
    });

    $('#cancel6').on('click', function () {
        $('#edit6').show();
        $('#save6, #cancel6, #inputAddress').hide();
    });

    //State Save
    $('#edit7').on('click', function () {
        $(this).hide();
        $('#save7, #cancel7, #inputState').show();
    });
    $('#save7').on('click', function () {
        $('#edit7').show();
        $('#save7, #cancel7, #inputState').hide();
    });

    $('#cancel7').on('click', function () {
        $('#edit7').show();
        $('#save7, #cancel7, #inputState').hide();
    });

    //Country Save
    $('#edit8').on('click', function () {
        $(this).hide();
        $('#save8, #cancel8, #inputCountry').show();
    });
    $('#save8').on('click', function () {
        $('#edit8').show();
        $('#save8, #cancel8, #inputCountry').hide();
    });

    $('#cancel8').on('click', function () {
        $('#edit8').show();
        $('#save8, #cancel8, #inputCountry').hide();
    });

    //Profile Pic Save
    $('#edit9').on('click', function () {
        $(this).hide();
        $('#save9, #cancel9').show();
    });
    $('#save9').on('click', function () {
        $('#edit9').show();
        $('#save9, #cancel9').hide();
    });

    $('#cancel9').on('click', function () {
        $('#edit9').show();
        $('#save9, #cancel9').hide();
    });

    //Room Service Buttons
    //Room A
    $('#edit10').on('click', function () {
        $(this).hide();
        $('#save9, #cancel9').show();
    });
    $('#save10').on('click', function () {
        $('#edit10').show();
        $('#save10, #cancel10').hide();
    });

    $('#cancel10').on('click', function () {
        $('#edit10').show();
        $('#save10, #cancel10').hide();
    });
})

/*---Adjust Prices---*/
.roomcard {
  position: relative;
  top: -15px;
  left: -440px;
  margin: auto;
  width: 350px;
  max-width: 95vw;
  height: 15rem;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  padding: 10px;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 15px;
  background: #f9fcff;
}

.roomcard-head {
  position: relative;
  left: -50px !important;
  top: 5px !important;
  text-align: center;
}

.addSession{
  position: relative;
  top: 0px;
  right: -180px;
  font-size: 17px !important;
  background: #ffffff;
  border: solid;
  border-color: #d5d5d59f;
  border-radius: 8px;
}

.price-roomName{
  position: relative;
  font-size: 17px;
  font-weight: 600;
  top: -30px;
}

.service{
  position: relative;
  top: -15px;
}

.serviceEdit{
  position: relative;
  top: -5px;
  right: -280px;
  background-color: #A388E7;
  border: none;
  border-radius: 5px;
  padding-bottom: 0 !important;
  z-index:10;
}

.serviceSave {
  position: relative;
  top: -5px;
  right: -280px;
  background-color: #00b63d;
  border: none;
  border-radius: 5px;
  padding-bottom: 0 !important;
  display: none;
  z-index:10;
}

.serviceCancel {
  position: relative;
  top: 25px;
  right: -215px;
  background-color: #b00000;
  border: none;
  border-radius: 5px;
  padding-bottom: 0 !important;
  display: none;
  z-index:10;
}

.serviceInfo{
  position: relative;
  top: -30px;
  margin-right: 0;
}

.money{
  position: relative;
  top: -30px;
  font-size: 25px;
  font-weight: 600;
}

.servicePrice{
  position: relative;
  right: -20px;
  top: -67px;
  font-size: 25px;
  font-weight: 600;
}

.editService{
  position: relative;
  right: -15px;
  border: none;
  background: none;
  margin-right: 0;
}


/*---Adjust Prices---*/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>StudioPick</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!---Bootstrap CSS--->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="CSS/settings.css">
</head>

<body>
            <!---Tab 2--->
            <div class="content" data-tab="2">
                    <div class="myroom-content-main" data-tab="1">
                        <div class="card-grid">
                            <article class="card1 text-white card-has-bg click-col"
                                style="background-image:url('https://westlakepro.com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg');">
                                <div class="card-img-overlay d-flex flex-column">
                                    <div class="card-body">
                                        <div class="media">
                                            <img class="mr-3 rounded-circle" id="stuImage"
                                                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU"
                                                alt="Generic placeholder image"
                                                style="max-width:50px; position: relative; top: 50px; left: -150px;">
                                            <p class="roomName">Room Name</p>
                                        </div>
                                    </div>
                                </div>
                            </article>
                            <article class="card2 text-white card-has-bg click-col"
                                style="background-image:url('https://images.squarespace-cdn.com/content/v1/5ca54e7f94d71a062d6042ac/1626463286614-7KC9NDHQVCEOYG0PRSFD/1390510159024.jpeg');">
                                <div class="card-img-overlay d-flex flex-column">
                                    <div class="card-body">
                                        <div class="media">
                                            <img class="mr-3 rounded-circle" id="stuImage"
                                                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU"
                                                alt="Generic placeholder image"
                                                style="max-width:50px; position: relative; top: 50px; left: -150px;">
                                            <p class="roomName">Room Name</p>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                    <div class="myroom-content-main" data-tab="2">
                        <!-- Card One -->
                        <div class="roomcard">
                            <button type="button" class="addSession">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-plus" viewBox="0 0 16 16">
                                    <path
                                        d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z">
                                    </path>
                                </svg>
                                Create Service
                            </button>
                            <h2 class="price-roomName">Room A
                                <br>
                                Services
                                <br>
                            </h2>
                            <div class="service">
                                <button class="serviceEdit" id="edit10" value="edit10">edit</button>
                                <button class="serviceSave" type="submit" id="save10" value="save10">Save</button>
                                <button class="serviceCancel" id="cancel10" value="cancel10">Cancel</button>
                                <p class="serviceInfo">Studio Session W/ No Engineer</p>
                                <p class="money">$</p>
                                <P class="servicePrice">45</P>
                            </div>


                        </div>
                        <!-- Card One -->
                    </div>
                </div>
            </div>
            <!---Tab 2--->

            <!---Footer--->
            <footer class="my-5 pt-5 text-muted text-center text-small">
                <p class="mb-1">© 2022 StudioPick.</p>
                <ul class="list-inline">
                    <li class="list-inline-item"><a href="#">Privacy</a></li>
                    <li class="list-inline-item"><a href="#">Terms</a></li>
                    <li class="list-inline-item"><a href="#">Support</a></li>
                </ul>
            </footer>
            <!---Footer--->

        </div>
    </main>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>


    <!---Javascript--->
    <script src="Javascript/settings.js"></script>
    <!---Javascript--->

    <!----More Bootstrap--->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>
    <!----More Bootstrap--->

</body>

</html>

>Solution :

Try using $('#save10, #cancel10').show(); instead of $('#save9, #cancel9').show(); inside the #save10 onclick function

//Edit button click dropdown
$(document).ready(function () {

    //First Name Save
    $('#edit').on('click', function () {
        $(this).hide();
        $('#save, #cancel, #inputFirst').show();
    });
    $('#save').on('click', function () {
        $('#edit').show();
        $('#save, #cancel, #inputFirst').hide();
    });

    $('#cancel').on('click', function () {
        $('#edit').show();
        $('#save, #cancel, #inputFirst').hide();
    });

    //Last Name Save
    $('#edit2').on('click', function () {
        $(this).hide();
        $('#save2, #cancel2, #inputLast').show();
    });
    $('#save2').on('click', function () {
        $('#edit2').show();
        $('#save2, #cancel2, #inputLast').hide();
    });

    $('#cancel2').on('click', function () {
        $('#edit2').show();
        $('#save2, #cancel2, #inputLast').hide();
    });

    //Email Save
    $('#edit3').on('click', function () {
        $(this).hide();
        $('#save3, #cancel3, #inputEmail').show();
    });
    $('#save3').on('click', function () {
        $('#edit3').show();
        $('#save3, #cancel3, #inputEmail').hide();
    });

    $('#cancel3').on('click', function () {
        $('#edit3').show();
        $('#save3, #cancel3, #inputEmail').hide();
    });

    //Studio Name Save
    $('#edit4').on('click', function () {
        $(this).hide();
        $('#save4, #cancel4, #inputName').show();
    });
    $('#save4').on('click', function () {
        $('#edit4').show();
        $('#save4, #cancel4, #inputName').hide();
    });

    $('#cancel4').on('click', function () {
        $('#edit4').show();
        $('#save4, #cancel4, #inputName').hide();
    });

    //Phone Save
    $('#edit5').on('click', function () {
        $(this).hide();
        $('#save5, #cancel5, #inputPhone').show();
    });
    $('#save5').on('click', function () {
        $('#edit5').show();
        $('#save5, #cancel5, #inputPhone').hide();
    });

    $('#cancel5').on('click', function () {
        $('#edit5').show();
        $('#save5, #cancel5, #inputPhone').hide();
    });

    //Studio Address Save
    $('#edit6').on('click', function () {
        $(this).hide();
        $('#save6, #cancel6, #inputAddress').show();
    });
    $('#save6').on('click', function () {
        $('#edit6').show();
        $('#save6, #cancel6, #inputAddress').hide();
    });

    $('#cancel6').on('click', function () {
        $('#edit6').show();
        $('#save6, #cancel6, #inputAddress').hide();
    });

    //State Save
    $('#edit7').on('click', function () {
        $(this).hide();
        $('#save7, #cancel7, #inputState').show();
    });
    $('#save7').on('click', function () {
        $('#edit7').show();
        $('#save7, #cancel7, #inputState').hide();
    });

    $('#cancel7').on('click', function () {
        $('#edit7').show();
        $('#save7, #cancel7, #inputState').hide();
    });

    //Country Save
    $('#edit8').on('click', function () {
        $(this).hide();
        $('#save8, #cancel8, #inputCountry').show();
    });
    $('#save8').on('click', function () {
        $('#edit8').show();
        $('#save8, #cancel8, #inputCountry').hide();
    });

    $('#cancel8').on('click', function () {
        $('#edit8').show();
        $('#save8, #cancel8, #inputCountry').hide();
    });

    //Profile Pic Save
    $('#edit9').on('click', function () {
        $(this).hide();
        $('#save9, #cancel9').show();
    });
    $('#save9').on('click', function () {
        $('#edit9').show();
        $('#save9, #cancel9').hide();
    });

    $('#cancel9').on('click', function () {
        $('#edit9').show();
        $('#save9, #cancel9').hide();
    });

    //Room Service Buttons
    //Room A
    $('#edit10').on('click', function () {
        $(this).hide();
        $('#save10, #cancel10').show();
    });
    $('#save10').on('click', function () {
        $('#edit10').show();
        $('#save10, #cancel10').hide();
    });

    $('#cancel10').on('click', function () {
        $('#edit10').show();
        $('#save10, #cancel10').hide();
    });
})

/*---Adjust Prices---*/
.roomcard {
  position: relative;
  top: -15px;
  left: -440px;
  margin: auto;
  width: 350px;
  max-width: 95vw;
  height: 15rem;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  padding: 10px;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 15px;
  background: #f9fcff;
}

.roomcard-head {
  position: relative;
  left: -50px !important;
  top: 5px !important;
  text-align: center;
}

.addSession{
  position: relative;
  top: 0px;
  right: -180px;
  font-size: 17px !important;
  background: #ffffff;
  border: solid;
  border-color: #d5d5d59f;
  border-radius: 8px;
}

.price-roomName{
  position: relative;
  font-size: 17px;
  font-weight: 600;
  top: -30px;
}

.service{
  position: relative;
  top: -15px;
}

.serviceEdit{
  position: relative;
  top: -5px;
  right: -280px;
  background-color: #A388E7;
  border: none;
  border-radius: 5px;
  padding-bottom: 0 !important;
  z-index:10;
}

.serviceSave {
  position: relative;
  top: -5px;
  right: -280px;
  background-color: #00b63d;
  border: none;
  border-radius: 5px;
  padding-bottom: 0 !important;
  display: none;
  z-index:10;
}

.serviceCancel {
  position: relative;
  top: 25px;
  right: -215px;
  background-color: #b00000;
  border: none;
  border-radius: 5px;
  padding-bottom: 0 !important;
  display: none;
  z-index:10;
}

.serviceInfo{
  position: relative;
  top: -30px;
  margin-right: 0;
}

.money{
  position: relative;
  top: -30px;
  font-size: 25px;
  font-weight: 600;
}

.servicePrice{
  position: relative;
  right: -20px;
  top: -67px;
  font-size: 25px;
  font-weight: 600;
}

.editService{
  position: relative;
  right: -15px;
  border: none;
  background: none;
  margin-right: 0;
}


/*---Adjust Prices---*/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>StudioPick</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!---Bootstrap CSS--->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="CSS/settings.css">
</head>

<body>
            <!---Tab 2--->
            <div class="content" data-tab="2">
                    <div class="myroom-content-main" data-tab="1">
                        <div class="card-grid">
                            <article class="card1 text-white card-has-bg click-col"
                                style="background-image:url('https://westlakepro.com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg');">
                                <div class="card-img-overlay d-flex flex-column">
                                    <div class="card-body">
                                        <div class="media">
                                            <img class="mr-3 rounded-circle" id="stuImage"
                                                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU"
                                                alt="Generic placeholder image"
                                                style="max-width:50px; position: relative; top: 50px; left: -150px;">
                                            <p class="roomName">Room Name</p>
                                        </div>
                                    </div>
                                </div>
                            </article>
                            <article class="card2 text-white card-has-bg click-col"
                                style="background-image:url('https://images.squarespace-cdn.com/content/v1/5ca54e7f94d71a062d6042ac/1626463286614-7KC9NDHQVCEOYG0PRSFD/1390510159024.jpeg');">
                                <div class="card-img-overlay d-flex flex-column">
                                    <div class="card-body">
                                        <div class="media">
                                            <img class="mr-3 rounded-circle" id="stuImage"
                                                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU"
                                                alt="Generic placeholder image"
                                                style="max-width:50px; position: relative; top: 50px; left: -150px;">
                                            <p class="roomName">Room Name</p>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                    <div class="myroom-content-main" data-tab="2">
                        <!-- Card One -->
                        <div class="roomcard">
                            <button type="button" class="addSession">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-plus" viewBox="0 0 16 16">
                                    <path
                                        d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z">
                                    </path>
                                </svg>
                                Create Service
                            </button>
                            <h2 class="price-roomName">Room A
                                <br>
                                Services
                                <br>
                            </h2>
                            <div class="service">
                                <button class="serviceEdit" id="edit10" value="edit10">edit</button>
                                <button class="serviceSave" type="submit" id="save10" value="save10">Save</button>
                                <button class="serviceCancel" id="cancel10" value="cancel10">Cancel</button>
                                <p class="serviceInfo">Studio Session W/ No Engineer</p>
                                <p class="money">$</p>
                                <P class="servicePrice">45</P>
                            </div>


                        </div>
                        <!-- Card One -->
                    </div>
                </div>
            </div>
            <!---Tab 2--->

            <!---Footer--->
            <footer class="my-5 pt-5 text-muted text-center text-small">
                <p class="mb-1">© 2022 StudioPick.</p>
                <ul class="list-inline">
                    <li class="list-inline-item"><a href="#">Privacy</a></li>
                    <li class="list-inline-item"><a href="#">Terms</a></li>
                    <li class="list-inline-item"><a href="#">Support</a></li>
                </ul>
            </footer>
            <!---Footer--->

        </div>
    </main>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>


    <!---Javascript--->
    <script src="Javascript/settings.js"></script>
    <!---Javascript--->

    <!----More Bootstrap--->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>
    <!----More Bootstrap--->

</body>

</html>