Is there a possible that I can transfer a certain html tag to another position using jquery?

I have here a navigation bar with a caret beside it. And I wanted to change this one dynamically using jquery. When on click, the activated menu transfers to the one being clicked. What I wanted to happen is I want to move also the arrow to the clicked menu in the navigation bar. How do I do that in jquery?

                         <div class = "side-nav-bar content">
                            <a class="active-menu" href="javascript:;">체육학</a><i class="arrow right"></i>
                            <a href="javascript:;">전공소개</a>
                            <a href="javascript:;">졸업 후 진로</a>
                            <a href="javascript:;">교육 프로그램</a>
                            <a href="javascript:;">교수소개</a>
                    </div>
                      $('.side-nav-bar a').click(function(){
        $('.side-nav-bar a').not(this).removeClass('active-menu');
        $(this).addClass('active-menu');
        $('arrow').insertAfter('active-menu');
}); 

                      .arrow {
                    border: solid white;
                    border-width: 0 2px 2px 0;
                    display: inline-flex;
                    padding: 3px;
                    position: absolute;
                    top: 23px;
                    right: 10px;
                     }

                      .right {
                        transform: rotate(-45deg);
                        -webkit-transform: rotate(-45deg);
                        }

#jquery #html #css