JSFiddle - React, Tailwind, and code Playground

HTML

<div data-test="test" id='foo' class='fl'></div>
<div data-test="me" id='bar' class='fl'></div>
<textarea></textarea>
<br/><button>Append</button><button>Clear</button>

CSS

.fl { float:left; width:180px; padding:10px; border:1px solid #eee;margin-right:10px; margin-bottom:10px; }
textarea { width:410px; }

JavaScript

jQuery(function($){
    
    // cache
    var paragraphFunctions = {
            add : function (text) {
                this.prepend($('<p></p>').text(text + "df"));
            },
            clear : function () {
                this.find('p').remove();
            }
        },  
        app = {
            foo : $('#foo'),
            bar : $('#bar'),
            textarea : $('textarea')
        }        
    var testFunctions = {
        add : function(text){
            this.prepend($('<p></p>').text($this.data('data-test')))
        }
    }
    // plug in similar functionality
    $.extend(app.foo, paragraphFunctions);
    $.extend(app.bar, paragraphFunctions);
    $.extend(app.bar, testFunctions);
    
    // use the functionalities
    $('button:contains("Append")').click(function(e) {
        app.foo.add(app.textarea.val());
        app.bar.add(app.textarea.val());
    });
    
    $('button:contains("Clear")').click(function(e) {
        app.foo.clear();
        app.bar.clear();
    });
    
});