<section class="section">
  <div class="container">
    <div>Current number: <span id="numbers"></span></div>
    <div>Current letter: <span id="letters"></span></div>
    <br>
    <div>Result stream: <span id="result"></span></div>
  </div>
</section>
const numbersEl = document.getElementById('numbers');
const lettersEl = document.getElementById('letters');
const resultEl = document.getElementById('result');
// An array
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
var letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"]

// Let's create streams for our 
var numbers$ = Rx.Observable
    .interval(750)
    .take(12)
    .map(i => numbers[i])

var letters$ = Rx.Observable
    .interval(1000)
    .take(11)
    .map(i => letters[i])

var result$ = Rx.Observable.zip(numbers$, letters$)

numbers$.subscribe(n => numbersEl.innerHTML = n);
letters$.subscribe(n => lettersEl.innerHTML = n);
result$.subscribe(n => resultEl.innerHTML = n);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js
  2. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css