为什么我从 next() 和 prev() 切换的文本输出不正确？

Question

单击箭头更改显示的选项时，会显示不正确的选项。用户应该能够单击选项菜单以将其打开/关闭并能够单击一个选项来选择它。或者，可以使用箭头来切换选项。这是有问题的代码：    <script>    $("#arrow_left_physics").click(function() {      var $selected = $(".left_menu_option_selected").removeClass("left_menu_option_selected");      var divs = $("#left_menu__variant_physics").children();        divs.eq((divs.index($selected) - 1) % divs.length).addClass("left_menu_option_selected");        $("#left_menu_open .button-text").text($($selected).text());        });    $("#arrow_right_physics").click(function() {        var $selected = $(".left_menu_option_selected").removeClass("left_menu_option_selected");        var divs = $selected.parent().children();        divs.eq((divs.index($selected) + 1) % divs.length).addClass("left_menu_option_selected");        $("#left_menu_open .button-text").text($($selected).text());    });    </script>$("#menu_open").click(function() {  $("#menu").toggle();});$(".menu_option").click(function() {  if ($(this).hasClass(".menu_option_selected")) {} else {    $(".menu_option").removeClass("menu_option_selected");    $(this).addClass("menu_option_selected");    $("#menu_open .button_text").text($(this).text());  }});$("#arrow_left").click(function() {  var $selected = $(".menu_option_selected").removeClass("menu_option_selected");  var options = $("#menu").children();  options.eq((options.index($selected) - 1) % options.length).addClass("menu_option_selected");  $("#menu_open .button_text").text($($selected).text());});$("#arrow_right").click(function() {  var $selected = $(".menu_option_selected").removeClass("menu_option_selected");  var options = $("#menu").children();  options.eq((options.index($selected) + 1) % options.length).addClass("menu_option_selected");  $("#menu_open .button_text").text($($selected).text());});.menu_open {  Cursor: pointer;}.menu {  display: none;  position: absolute;  border: 1px solid;}.menu_option {  Cursor: pointer;  Padding: 5px;}