JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://interactjs.io/js/interact.min.js"></script>
<button type="button" id="tfButton">Add a Thought</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper" style="width:500px; height:500px; background-color: #ff6; margin-left:200px;"></div>

JavaScript

var itmCount = 0;
$(function() {
    function createFields(e) {
        itmCount++;
        var inWrap = $('<div />', { class: 'name-wrapper', id: 'inWrap_'+itmCount }),
            nameWrap = $('<div />', { class: 'name' }).appendTo(inWrap),
            outWrap = $('<div />');

        nameWrap.append(
            $('<input />', { class: 'fTypex', placeholder: 'Thought of the day...', type: 'textarea', id: 'nameWrap_'+itmCount })
        );

        outWrap.append(
            $('<input />', { type: 'textarea', class: 'tfz', id: 'outWrap_'+itmCount})
        );

        $('#InputsWrapper').append(inWrap);
        $('#OuterWrapper').append(outWrap);
    }
    $(document)
        .on('click', '#tfButton', createFields)
})

var x = 0, y = 0;

interact('#outWrap_1') //how to set this to function with multiple text fields?
    .draggable({
        onmove: function (event) {
            x += event.dx;
            y += event.dy;

            event.target.style.webkitTransform =
            event.target.style.transform =
                'translate(' + x + 'px, ' + y + 'px)';
        }
    })
    .inertia(true)
    .restrict({
        drag: "#OuterWrapper",
        endOnly: true
    });