Incrementing a counter with Observables

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css">
<form>
  <input type="button" class="button" value="Increment" id="increment"></input>
  <input type="button" class="button" value="Decrement" id="decrement"></input>
</form>
<p>
The counter value is currently: <strong id="counter"></strong>
</p>

Babel + JSX

const incrementButton$ = Rx.Observable.fromEvent(document.getElementById('increment'), 'click').map(ev => 1);
const decrementButton$ = Rx.Observable.fromEvent(document.getElementById('decrement'), 'click').map(ev => -1);

const counter$ =
	Rx.Observable.merge(incrementButton$, decrementButton$)
	.startWith(0)
  .scan((accumulator, value) => accumulator + value);

counter$.subscribe(counter => document.getElementById('counter').innerHTML = counter.toString());