JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/Reactive-Extensions/RxJS/master/dist/rx.all.js"></script>
<button id="increment">increment</button>
<button id="decrement">decrement</button>
<textarea id='increment'></textarea>
<textarea id='decrement'></textarea>
<textarea id='ta_result'></textarea>

CSS

textarea {
    font-family:"Courier New", monospace;
    font-size: 12px;
    width: 100%;
    height: 120px;
}

JavaScript

var ta_validation = document.getElementById('ta_validation');
var ta_change = document.getElementById('ta_change');
var ta_result = document.getElementById('ta_result');

function emits ( who, who_ ) {return function ( x ) {
 who.innerHTML = [who.innerHTML, who_ + " emits " + JSON.stringify(x)].join("\n");
};}

let initialState = { counter: 0 };

var inc$ = Rx.Observable
 .fromEvent(document.getElementById('increment'), 'click')
 .map(function(){return increment;});

var dec$ = Rx.Observable
 .fromEvent(document.getElementById('decrement'), 'click')
 .map(function(){return decrement;});

var upstream = Rx.Observable.merge(inc$, dec$)
 .tap(function(x){console.log("func",x)});

var downstream = upstream.scan(function(state, reducer){
  console.log('state', reducer(state))
  return reducer(state);
}, initialState).shareReplay(1);

var increment = function(state) {
  return {counter : state.counter + 1};
};

var decrement = function(state) {
  return {counter : state.counter - 1};
};

downstream.subscribe(function(state){
    emits(ta_result,'subscriptionA')(state.counter);
});

setTimeout(function() {
  downstream.subscribe(function(state) {
    emits(ta_result,'subscriptionB')(state.counter);
  });
}, 3000);