JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td id="title"></td>
  </tr>
  <tr>
    <td>Enter Name1:</td>
    <td>
      <input id="txtName1" type="text">
    </td>
    <td></td>
    <td colspan="2">
      <input type="button" id="btnUpdate1" value="Update 1" />
    </td>
  </tr>
  <tr>
    <td>Enter Name2:</td>
    <td>
      <input id="txtName2" type="text">
    </td>
    <td></td>
    <td colspan="2">
      <input type="button" id="btnUpdate2" value="Update 2" />
    </td>
  </tr>
  <tr>
    <td>Enter No of Children:</td>
    <td>
      <input id="txtChilds" type="number">
    </td>
    <td colspan="2">
      <input type="button" id="btnGenerate" value="Generate" />
    </td>
  </tr>
</table>
<div id="divFamilyTree">
</div>

CSS

.selected {
   background-color: lightgrey;
 }
 
 #divFamilyTree {
   text-align: center;
 }
 
 table {
   display: inline-block;
   vertical-align: top;
 }
 
 #divFamilyTree,
 td,
 tr {
   white-space: nowrap;
 }
 
 tr.canvas {
   height: 100px;
 }

JavaScript

$(document).ready(function() {
  $('#divFamilyTree').on('click', 'table', function(e) {
    if (!$(this).hasClass("member")) {
      e.stopImmediatePropagation();
      $('#divFamilyTree').find('table').removeClass('selected');
      $(this).addClass('selected');
    }
  });

  $('#btnUpdate1').click(function() {
    var ft = $('#divFamilyTree');
    var selected = ft.find('table.selected');
    selected.find('.name1:first').html($('#txtName1').val());
  });
  $('#btnUpdate2').click(function() {
    var ft = $('#divFamilyTree');
    var selected = ft.find('table.selected');
    selected.find('.name2:first').html($('#txtName2').val());
  });

  $('#btnGenerate').click(function() {
    var ft = $('#divFamilyTree');
    var selected = ft.find('table.selected');
    var childs = $('#txtChilds').val();
    if (childs > 0) {
      if (ft.find('table').length > 0) {
        if (selected.length != 0) {
          selected.find('.child').remove();
          if (selected.find('.canvas').length == 0) {
            selected.append('<tr class="canvas"><td><canvas></td></tr>');
          }
          selected.append('<tr class="child"><td></td></tr>');
          var td = selected.find('tr.child>td')
          for (i = 0; i < childs; i++) {
            td.append('<table><tr><td><table class="member"><tr><td class="name1">Person 1</td><td class="name2">Person 2</td></tr></table></td></tr></td></table>');
          }
        }
        refreshAllLinks();
      } else {
        for (i = 0; i < childs; i++)
          ft.append('<table><tr><td><table class="member"><tr><td class="name1">Person 1</td><td class="name2">Person 2</td></tr></table></td></tr></td></table>');
      }
    }
  });
});

function refreshAllLinks() {
  var canvases = $('canvas');
  for (i = 0; i < canvases.length; i++) {
    var canvas = canvases[i];
    canvas.style.width = '100%';
    canvas.style.height = '100%';
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
   ...