How to unbind element then allow that element to bind again

I am having some issues withing attempting to unbind then bind an element again.

I'm attempting to create a type of tabbing system someone can use when browsing the site on mobile. I want someone to be able to select the right arrow and have the ul.tube move margin-left: -300px (which is working fine). And the left arrow will move the ul.tube margin-left: 300px (which also works fine).

The issue happens when you hit the max margin-left of -900px, it unbinds the right arrow. I would like it when you start to click the left arrow after reaching the -900px, it re-binds the right arrow. This will allow people to tab back to the right after tabbing to the left.

Example Screenshot

Below is the HTML code example.

<div id="how-we_set">
    <i class="fa fa-chevron-left left"></i><br>
    <i class="fa fa-chevron-right right"></i><p></p>
    <ul class="tube">
        <li>Discovery</li>
        <li>Discovery 2</li>
        <li>Discovery 3</li>
        <li>Discovery 4</li>
    </ul>
    <div id="tab1">
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
    </div>
    <div id="tab2">
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
    </div>
    <div id="tab3">
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
    </div>
    <div id="tab4">
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
    </div>
</div>

Below is the JS I have so far.

// MOBILE DESIGN TAB
$('#how-we_set i.right').click(function handler() {
    $("#how-we_set ul.tube li").addClass("active");
    $("#how-we_set i.left").css('color', 'rgba(0,0,0,1.0)');
    $('#how-we_set ul.tube').animate({
        'marginLeft' : "-=300px"
    },
    function () {
      if ($(this).css ('marginLeft') >= "-900px") {
        $("#how-we_set i.right").unbind('click', handler);
        $("#how-we_set i.right").css('color', 'rgba(0,0,0,0.2)');
      }
    });
});
$('#how-we_set i.left').click(function handler2() {
    $("#how-we_set i.right").css('color', 'rgba(0,0,0,1.0)');
    $('#how-we_set ul.tube').animate({
        'marginLeft' : "+=300px"
    },
    function () {
      if ($(this).css ('marginLeft') >= "0px") {
        $("#how-we_set i.left").unbind('click');
        $("#how-we_set i.left").css('color', 'rgba(0,0,0,0.2)');
      }
    });
    $('#how-we_set i.right').bind(handler);
});

If there is a better way to approach this, I'm open to new ideas. After looking at the example screenshot I'm sure you can understand that I'm attempting to tab the image and all content below each time an arrow is clicked.

Thank you for your help.