Insert child rows underneath parent row

Question

I am rendering rows to make my web page look like a spreadsheet. The way I add rows is like this and it works fine:

var StockRow = React.createClass({
    unwatch: function() {
        this.props.unwatchStockHandler(this.props.stock.symbol);
    },
    render: function () {
        var lastClass = '',
            changeClass = 'change-positive',
            iconClass = 'glyphicon glyphicon-triangle-top';
        if (this.props.stock === this.props.last) {
            lastClass = this.props.stock.change < 0 ? 'last-negative' : 'last-positive';
        }
        if (this.props.stock.change < 0) {
            changeClass = 'change-negative';
            iconClass = 'glyphicon glyphicon-triangle-bottom';
        }
        return (
            <tr>
                <td><button type="button" className="btn btn-default btn-sm" onClick={this.unwatch}>
                <span className="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>
                </button></td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{this.props.stock.symbol}</td>                
                <td className={lastClass}>{this.props.stock.last}</td>
                <td className={changeClass}>{this.props.stock.change} <span className={iconClass} aria-hidden="true"></span></td>
                <td>{this.props.stock.high}</td>
                <td>{this.props.stock.low}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
            </tr>
            //See edit below to add hidden row here. This part doesn't work.
            <tr style="display: none;" class="subRow">
                <td {5} </td>
            </tr>
        );
    }
});

The initial items on the row(s) contains a button with a plus sign icon. What I would like to do is simulate a tree-like view so that when the user clicks on the button, the icon changes to a minus sign on the parent row, and a set number of new child rows are added underneath between the parent item and the next parent item. The child row items don't have a button on it.

Is this too hard to do without a dedicated web control? If it is not, if someone can show me a simple example that would be great.

EDIT

CSS

.offscreen {
  position: absolute;
  left: -1000px;
  top: 0px;
  overflow:hidden;
  width:0;
}

.subRow {
    background-color: #CFCFCF; 
}

If I try to add a hidden row in the code above where it says "See edit below to add hidden row here", it doesn't work:

<tr style="display: none;" class="subRow">
     <td {5} </td>
</tr>