Please help-How can I hide the current element when clicked on next button?

[xcfx2888]

How can I hide the current element when clicked on next button(in my case its “show button”) and show the next element at a same time?

actually , the code is working fine now for my purpose, It’s generating the elements in the expression one by one.
i.e
suppose my generated expression is 1+2-33 = -30 then after clicking show button its generating one by one elements , firstlt its showing 1 then after another click its showing + and so on.untill we reached the last element(answer -30).
but the problem is here , I want to show only one element at a time i.e after clicking show button the next element should come up which will be visible to user and the current element will go to previous position but will not be visible to user untill he click on previous button., how should I do it ?

this is my javascript code that I have created

                        //script for generate one by one questions
             function gotoNextSlide() {
    goToSlide(getCurrentSlide().index() + 1);//goo to next Question
   }

    function gotoPrevSlide() {
     goToSlide(getCurrentSlide().index() - 1);//Go to previous Question
   }

    function getCurrentSlide() {
    return $("#slides .slide:visible");//current question which is visible to user
        }


           function goToSlide(index) {   // function for dot or bullet indicators
         var $slides = $("#slides .slide");
              if (index >= 0 && index < $slides.length) {
                $slides
             .removeClass("active")
               .eq(index)
               .addClass("active");
                 $(".dot")
                .removeClass("active")
                  .eq(index)
                  .addClass("active");
                }
        }


       function showNextItem() {
         var $nextItem = getCurrentSlide().find('.slide-item:not(.visible)').eq(0);
          if ($nextItem.length) {
           $nextItem.addClass('visible');
            return;
          }
     // show the answer
        getCurrentSlide().find('.answer').toggleClass('visible');
        }

      

      function init() {
        $(".show-answer").click(showNextItem);
           $(".show-answer").click(hideCurrentItem);
           $(".goto-next-slide").click(gotoNextSlide);
              $(".goto-prev-slide").click(gotoPrevSlide);

              goToSlide(0);
           }

           $(document).ready(init);

this is the part of code which is shows the output

        function output_slide($slide_data, $index=1) {
    $expression = $slide_data['expression'];
    $result = $slide_data['result'];
    ?>
    <div class="slide flex flex-justify-center flex-column" id="out">
        <h2 class="ta-center">Q(<?php echo $index+1 ?>)</h2>
        <div class="expression flex flex-center flex-row" id="exp">
            <?php foreach($expression as $item) { ?>
            <span class="slide-item"><?php echo $item ?></span>
            <?php } ?>
            <span class="slide-item"> = </span>
            <span class="slide-item">
                <span class="answer flex flex-center">
                    <span class="answer-placeholder">
                       ****
                    </span>
                    <span class="answer-content">
                        <?php echo $result; ?>
                    </span>
                </span>
            </span>
        </div><br> 
         <center><div class="dotin"><?php
            for ($j=0; $j<count($expression); $j++) {
                ?><a class="dots-cont" onclick="goToItem(<?php echo $j ?>)"></a><?php
            }
        ?></div></center>
    </div>


    
                  <?php
            }

                  function output_slideshow_controls($data) {
            ?>
    <!--  go to next element of expression , for inner slider-->
    <a class="goto-next-slide overlay-button overlay-right">Next</a>    
    <a class="goto-prev-slide overlay-button overlay-left">Previous</a> 
    <a class="show-answer button" onclick="goToItem(<?php echo $j ?>)">Show</a>
          
  

                 <?php
                 }

                     {
             ?>
  
    </div><?php
         }

I have tried many logics but somehow they are not working , How should I do it?