JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<br/>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="col-md-12">
    <button type="button" class="btn btn-primary" style="float:right;" id="addIssue">Add Row</button>
    <table class="table table-striped" id="issues">
        <thead>
            <tr>
                <th>#</th>
                <th>Title</th>
                <th>Details</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="id">1</td>
                <td class="titles"><a class="editable editable-click" href="#" id="title-1" data-type="text" data-pk="1" data-title="Title">My Title</a>
                </td>
                <td class="details"><a class="editable editable-pre-wrapped editable-click" href="#" id="detail-1" data-type="textarea" data-pk="1" data-title="Details">lots of details here, makes this area look messy. text wrap needed</a>
                </td>
                <td class="descs"><a class="editable editable-pre-wrapped editable-click" href="#" id="descript-1" data-type="textarea" data-pk="1" data-title="Description">big long description stuff here. lots of text makes this area looks messy when lots or rows.</a>
                </td>
            </tr>
            <tr>
        </tbody>
    </table>

JavaScript

$(document).ready(function () {
             //toggle `popup` / `inline` mode
             $.fn.editable.defaults.mode = 'popup';

             activateEF();


             //Add new row
             $('#addIssue').on('click', function (event) {
                 //Organise ID
                 var ncuid = Number($("#cuid").val()) + Number('1');
                 $("#cuid").val(ncuid);

                 //Add blank Issue row
                 var bissues = $("#bissue").val();
                 bissues = bissues.split("#id").join(ncuid);
                 //replace("#id", ncuid);
                 //bissues = bissues.replace('"#id"', ncuid);
                 $("#issues > tbody").append(bissues);
                 event.preventDefault(); // To prevent following the link (optional)
                 activateEF();
             });

         });

         function activateEF() {
             // remove existing listeners 
             $(".titles a").unbind();

             // setup editable for new elements created in the DOM    
             $('.titles a').editable({
                 type: 'text',
                 name: 'title',
                 url: 'post',
                 title: 'Title',

             });
             $('.details a').editable({
                 type: 'text',
                 name: 'details',
                 url: 'post',
                 title: 'Details'
             });
             $('.descs a').editable({
                 type: 'text',
                 name: 'description',
                 url: 'post',
                 title: 'Description'
             });

         }