JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="mydiv" data-direction="rtl">
    <span>
<i class="glyphicon glyphicon-chevron-left"></i>

<i class="glyphicon glyphicon-chevron-left"></i>

<i class="glyphicon glyphicon-chevron-left"></i>

    <br>
    <br>
<i class="glyphicon glyphicon-chevron-right"></i>

<i class="glyphicon glyphicon-chevron-right"></i>

<i class="glyphicon glyphicon-chevron-right"></i>

    <br>
    <br>
<i class="glyphicon glyphicon-arrow-left"></i>

<i class="glyphicon glyphicon-arrow-left"></i>

<i class="glyphicon glyphicon-arrow-left"></i>

    <br>
    <br> <i class="glyphicon glyphicon-arrow-right"></i>

<i class="glyphicon glyphicon-arrow-right"></i>

<i class="glyphicon glyphicon-arrow-right"></i>

    <br>
    <br>
<i class="glyphicon glyphicon-hand-left"></i>

<i class="glyphicon glyphicon-hand-left"></i>

<i class="glyphicon glyphicon-hand-left"></i>

    <br>
    <br> <i class="glyphicon glyphicon-hand-right"></i>

<i class="glyphicon glyphicon-hand-right"></i>

<i class="glyphicon glyphicon-hand-right"></i>

    <br>
    <br>
        </span>
    <hr> <a id="mybutton" class="btn btn-primary" href="#">flip left-right</a>

</div>

JavaScript

$("#mybutton").click(function () {
    rtlChange();
});

function rtlChange() {
console.log("hello")
    var textDirection = $("#mydiv").data("direction");
    if (textDirection == "rtl") {
        $("i.glyphicon").each(function( index ) {
          console.log(this)
			if($(this).hasClass("glyphicon-chevron-right")){
				$(this).removeClass("glyphicon-chevron-right");
				$(this).addClass("glyphicon-chevron-left");
			}else{
				$(this).removeClass("glyphicon-chevron-left");
				$(this).addClass("glyphicon-chevron-right");
			}
        });
    }
}