JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jointjs.com/downloads/joint.js"></script>
<link rel="stylesheet" href="http://jointjs.com/downloads/joint.css">
<script src="http://jointjs.com/downloads/joint.shapes.devs.js"></script>
<input type="button" id="btn" value="Add block" />
mouse up:<span id="span1">0</span>times

<div id="myholder" style="width:4000px;height:400px;">

JavaScript

var position=50;
var graph = new joint.dia.Graph;

joint.shapes.basic.newRect = joint.shapes.basic.Generic.extend({
    markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',
    defaults: joint.util.deepSupplement({     
        type: 'basic.newRect',
        attrs: {
            'rect': { fill: 'white', stroke: 'black', 'follow-scale': true, width: 80, height: 40 },
            'text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle' }
        },
        mycustom: "some custom property"
    }, joint.shapes.basic.Generic.prototype.defaults)
});

 var paper = new joint.dia.Paper({
     el: $('#myholder'),
     width: 1000,
     height: 1000,
     model: graph,
     gridSize: 1,
     defaultLink: new joint.dia.Link({
         smooth: true,
         attrs: {
             '.marker-target': { stroke: '#E74C3C', fill: '#E74C3C', d: 'M 14 0 L 0 7 L 14 14 z' },
             '.connection': { stroke: '#E74C3C', 'stroke-width': 4 },
         },
         labels: [
             { position: .5, attrs: { text: { text: 'link', 'font-weight': 'bold' } } }
         ]
     })
 });


// Btn click handler
 $("#btn").on('click', function () {
     var rect = new joint.shapes.basic.newRect({
         position: { x: position, y: position },
         size: { width: 100, height: 40 },
         attrs: {
             rect: { 'stroke-width': '5', 'stroke-opacity': .7, stroke: 'black', rx: 3, ry: 3, fill: 'lightgray', 'fill-opacity': .5 },
             text: { text: 'Block', magnet: true, 'font-size': 10, style: { 'text-shadow': '1px 1px 1px black'} }
         }
     });
     graph.addCell(rect);
     position=position+150;
 });

// simulate user click
$("#btn").trigger("click");
$("#btn").trigger("click");

// Can i do anything with this event?
 paper.on('cell:pointerup', function (cellView, evt, x, y) {
     $("#span1").html(Number($("#span1").html())+1);
     var elementBelow = graph.get('cells').find(function...