JSFiddle - React, Tailwind, and code Playground

by matthias_h

HTML

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>Text,that, needs, to, be, wrapped.<span class="count">not this</span>
                <button>Wrap</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Text, that, needs, to, be, wrapped.<span class="count">not this</span>
                <button>Wrap</button>
            </td>
        </tr>
    </tbody>
</table>

CSS

.new {
    background:red;
    padding:10px
}

JavaScript

$('button').click(function () {

var text = $(this).closest('td').contents().eq(0).text().split(','),
        len = text.length,
        result = []; 

    for( var i = 0; i < len; i++ ) {
        result[i] = '<span class="new">' + text[i] + '</span>';
    }
    var keep = $(this).closest('td').find(".count"),
        button = $(this).closest('td').find('button');
$(this).closest('td').html(result.join(' ')).append(keep).append(button);   
});