JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<center> 
    <button>Add Row</button>    
</center>

CSS

.cell {
    font-size: 12px;
    padding: 5px;
    border: 1px solid black;
    margin: 5px;
    display: inline-block;
}

JavaScript

var row = [];
var $center = $('center');

$('button').click(function() {
    row.push(1);
    for (var i = row.length - 2; i >= 1; i -= 1) {
        row[i] += row[i - 1];
    }
    
    var $line = $('<div/>', {'class': 'line'});
    var $cells = row.map(function(num) {
        return $('<div/>', {'class': 'cell', 'text': num});
    });
    
    $center.append($line).append($cells);
});