JSFiddle - React, Tailwind, and code Playground

by Mingtao Sun

HTML

<div>
<p class="hidden">SPR: <span class="spr"></span> Size: <span class="size"></span></p>
</div>

CSS

.hidden {
  display: none;
}

JavaScript

$(function($){
  for (i=1; i<=12; i++) {
    const newP = $('p.hidden').clone().removeClass('hidden');
    newP.find('.spr').text(i);
    newP.find('.size').text(geometricSize(i));
    newP.appendTo($('div'));
  }
});

function geometricSize(spr) {
	return (0.5 * (Math.pow(1 + 2 * spr, 0.5) -1)).toFixed(2);
}