JSFiddle - React, Tailwind, and code Playground

HTML

<p>
Click the button to render a new fruit to the screen...
</p>
<button id="renderNextFruitButton" type="button">Render next fruit</button>
<ul id="fruits"></ul>

JavaScript

var fruits = ["pear", "apple", "banana"];

var getNextFruit = function() {
    var _index = 0,
        _numberOfFruits = fruits.length;
    
    getNextFruit = function() {
        render(fruits[_index]);
        _index = (_index + 1) % _numberOfFruits;
    }
    getNextFruit.get = function() {
    	return _index;
    }
    getNextFruit();
};

function render(fruit) {
	var fruitsElement = document.getElementById("fruits");
  
  render = function(fruit) {
  	var listItemElement = document.createElement('li');
    listItemElement.textContent = fruit + " - " +  getNextFruit.get();
  	fruitsElement.appendChild(listItemElement);
  }
  render(fruit);
}

document.getElementById('renderNextFruitButton').addEventListener('click', function click() {
	getNextFruit();
});