JSFiddle - React, Tailwind, and code Playground

HTML

<div class="message">Alte Nachricht</div>

<p><input type="button" value="Neue Nachricht anzeigen" /></p>

CSS

.message {
  background: yellow;
  border: 2px solid black;
  padding: 2em;
}

JavaScript

var Widget = function(){
    var self = this;
    self.options = {
        UIButton: $('[type=button]'),
        UIMessageField: $('.message')
    }
    self.getData = function() {
        return $.post('/echo/html/', { html: 'Neue Nachricht', delay: 2 });
    }
    self.changeDomMessage = function(newMessage) {
        return self.options.UIMessageField.text(newMessage).promise();
    } 
    self.hideMessage = function(){
        return self.options.UIMessageField.hide('slow').promise();
    }
    self.showMessage = function(){
        return self.options.UIMessageField.show('slow').promise()
    }
    self.eventButtonClick = function(){
        $(this).attr('disabled', true);
        self
            .hideMessage()
            .then(self.getData)
            .then(self.changeDomMessage)
            .then(self.showMessage)
    }
    self.UIEvents = function(){
        self.options.UIButton.click(this.eventButtonClick);
    }
    self.UIEvents();
}()