Issue navigating my javascript array

Question

I am trying to make a simple menu where you can choose the background color of the menu itself, I load the options into an array of strings.

Inorder to navigate throught the options I use two elements with different classes, .rest and plus. Both navigate through the previous and next options available.

ISSUE: It only works once, I click on .plu and it shows "verde" or green, the nextcolor value. If I press plus again it won't show me the next value, it stays like that. I can't go back to the previous color neighter.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
$(document).ready(function(){
colores = ['amarillo', 'verde', 'rosa', 'naranja', 'purpura'];
var i = 0;
$('.colorines').text(colores[i]);

$('.rest').click(function () {
colores[i] = colores[i - 1];
$('.colorines').text(colores[i]);
});

$('.plus').click(function () {
colores[i] = colores[i + 1];
$('.colorines').text(colores[i]);
alert('next color');
});


});

.postit {
  position:absolute; 
  overflow:hidden;
  left:1070px; 
  top:-140px; 
  padding-left:10px;
  line-height: 1;   
  width: 275px;    
  margin: 0px;    
  min-height:250px;
  max-height:250px;
  padding-top:35px; 
  border:1px solid #E8E8E8;  
  border-top:60px solid #fdfd86;
  font-family:'Reenie Beanie';    
  font-size:22px;      
  border-bottom-right-radius: 60px 5px;
  display:inline-block;    
  background: #ffff88; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */
  background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C #A3FF87 #CFFFC7*/
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
 
.postit:after {     
  content: "";
  position:absolute; 
  z-index:-1;
  right:-0px; 
  bottom:20px;
  width:200px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
  -moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  -o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  transform: matrix(-1, -0.1, 0, 1, 0, 0);
}

.settingswheel{
	position:absolute; 
	bottom:32px; 
	right:15px; 
	cursor:pointer;
	z-index:10001;
	-moz-transition: transform 2.5s;
    -webkit-transition: transform 2.5s;
    transition: transform 2.5s;
}

.settingswheel:hover{
  transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

.settingsin{z-index:2; font-size:60px; font-family: 'Covered By Your Grace', cursive;  display:flex; justify-content:flex-start; align-items:center; height:110px; width:200px;  background-color:rgb(255, 255, 136); position:absolute; bottom:0px; left:5px; transition: all 1.5s ease;}
.settingsout{z-index:2; font-size:60px; font-family: 'Covered By Your Grace', cursive;  display:flex; justify-content:center; align-items:center; padding:15px; background-color:rgb(255, 255, 136); position:absolute; bottom:0px; left:-202px; transition: all 1.5s ease;}

.menu{
	list-style:none; 
	bottom:3px; 
	position:absolute; 
	font-family: 'Covered By Your Grace', cursive; 
	font-weight:300; 
	width:200px;
	z-index:1;
}

.menu  li{font-size:21px; margin-top:5px;}

<div class="postit">
  <ul class="menu">
    <li><span data-es="Pantalla completa: " data-en="Full screen: "></span><span data-es="si" data-en="yes"></span></li>
	<li><span data-es="Idioma: " data-en="Language: "></span><span class="la" style="cursor:pointer;" data-es="ingles" data-en="english"></span></li>
	<li><span data-es="Diapositivas: " data-en="Slideshow: " ></span><span>< </span><span>3s</span><span> ></span></li>
	<li><span data-es="Color postit: " data-en="Postit color: "></span ><span class="rest" style="cursor:pointer;">< </span><span class="colorines"></span><span class="plus" style="cursor:pointer;" > ></span></li>
  </ul>
</div>

Answer 1

You should be decrementing/incrementing the value of i via -- or ++ instead. It would also be a good idea to setup some kinda of conditional that checks that you don't go over/under your array index:

$(document).ready(function() {
  colores = ['amarillo', 'verde', 'rosa', 'naranja', 'purpura'];

  var i = 0;

  $('.colorines').text(colores[i]);

  $('.rest').click(function() {
    if (i === 0) {
      return;
    } else {
      $('.colorines').text(colores[--i]);
    }
  });

  $('.plus').click(function() {
    if (i === colores.length - 1) {
      return;
    } else {
      $('.colorines').text(colores[++i]);
      alert('next color');
    }
  });
});

Answer 2

You are not incrementing "I" any time. So please increase it when it executes plus. And not use colores[i] = colores[i + 1]; it will make your colores array with duplicate elements.