JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/Bashoto/bashoto-js/master/dist/bashoto.min.js"></script>
<h1 id="title">Bashoto example</h1>

<p><strong>Random ID: </strong><span id="uuid"></span></p>
<input type="text" id="t1text" value="topic 1 text" />
<input type="submit" id="t1publish" value="Topic 1 Publish" />
<br/>
<input type="text" id="t2text" value="topic 2 text" />
<input type="submit" id="t2publish" value="Topic 2 Publish" />

<h2>Messages</h2>
<ul id="messages"></ul>

JavaScript

// Get a random ID to identify this session
// In case you want to try accessing from another 
// Device at the same time
var id = Math.random().toString(36).substring(10);
$("#uuid").text(id);

var topicName = "change-me-please";
var bashoto = new Bashoto("135f4565-c1e2-4d4d-bb77-d187f4067917");
bashoto.locate({
    success: function() { 
        var topic1 = bashoto.subscribe({
            message: messageHandler, 
            open: function(o) {
                $("#t1publish").click(function(){
                    var msg = $("#t1text").val();
                    var from = id+" Topic 1";
                    topic1.publish({msg: msg, from: from});
                });
            }
        }, {name: topicName});
        var topic2 = bashoto.subscribe({
            message: messageHandler, 
            open: function(o) {
                $("#t2publish").click(function(){
                    var msg = $("#t2text").val();
                    var from = id+" Topic 2";
                    topic2.publish({msg: msg, from: from});
                });
            }
        }, {name: topicName});
    }, 
    error: function(error) {
        $("#messages").append('Geolocation failed because: '+error.message);
    }
});

function messageHandler(message) {
    var from = message.from;
    var msg = message.msg;
    $("#messages").append('<li><strong>'+from+'</strong>: '+msg+'</li>');
}