Untitled

How do I change the value when I click on the right arrow?
$(function(){
    var room = ['1-visiting office', '2-', '3-'];
    $('#text_holder').val(room[0]);

    $("#rightarrow").click(function(){
        $('#text_holder').val(room[next]);
    });
});

<input id="text_holder" name="text_holder"/>
<img src="dev/images/rightarrow.jpg" id="rightarrow" />

$(function(){
    var room = ['1-visiting office', '2-', '3-'];
    $('#text_holder').val(room[0]);

    $("#rightarrow").data('counter', 0).click(function(){
        var counter = $(this).data('counter')+1;
        $('#text_holder').val(room[counter]);
        $(this).data('counter', counter);
    });
});

$(function(){
    var room = ['1-visiting office', '2-', '3-'];
    $('#text_holder').val(room[0]);

    $("#rightarrow").data('counter', 0).click(function(){
        var counter = ($(this).data('counter')+1) % room.length;
        $('#text_holder').val(room[counter]);
        $(this).data('counter', counter);
    });
});

$(function(){
    var room = ['1-visiting office', '2-', '3-'];
    var counter = 0;
    $("#rightarrow").click(function(){
        $('#text_holder').val(room[counter++]);
    }).click();
});