Непрерывный перенос вращения JQuery?

Question

У меня есть две кнопки, которые расположены на противоположных сторонах формы («Далее» спереди, «Отправить» на спине). Кнопки выполняют поворот (180deg) правильно, однако они работают только по одному клику. Другими словами, команда onClick работает только один раз за клик. Есть ли какой-либо способ для меня сбросить мое преобразование, чтобы повторить мое вращение на клике бесконечно?

<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    $("input[name='next']").on("click", function() { 
 
     // console.log("The NEXT Button Worked!"); 
 
     $(".form").css("transform", "rotateY(180deg)"); 
 
    }) 
 
    $("input[name='back']").on("click", function() { 
 
     // console.log("The BACK Button Worked!"); 
 
     $(".formFlipAgain").css("transform", "rotateY(180deg)"); 
 
    }) 
 
    }); 
 

 

 

 
    function showBack() { 
 
    setTimeout(function() { 
 
     document.getElementById("backSide").style.display = "block"; 
 
    }, 600); 
 
    setTimeout(function() { 
 
     document.getElementById("frontSide").style.display = "none"; 
 
    }, 600); 
 
    }; 
 

 
    function showFront() { 
 
    setTimeout(function() { 
 
     document.getElementById("frontSide").style.display = "block"; 
 
    }, 600); 
 
    setTimeout(function() { 
 
     document.getElementById("backSide").style.display = "none"; 
 
    }, 600); 
 
    };

Answer 1

Ввести два флага.

var flag1=0; 
var flag2=0 
$(document).ready(function() { 
    $("input[name='next']").on("click", function() { 
    // console.log("The NEXT Button Worked!"); 
    $(".form").css("transform", "rotateY("+flag1?0:180+"deg)"); 
    flag1=!flag1; 
    }) 
    $("input[name='back']").on("click", function() { 
    // console.log("The BACK Button Worked!"); 
    $(".formFlipAgain").css("transform", "rotateY("+flag2?0:180+"deg)"); 
    flag2=!flag2; 
    }) 
});