Greetings, I am in the process of creating a character sheet. I want it to look like this and this . Basically i want a repeating skills section down at the bottom. I want it to be really easy to read the Image section isn't necessary. I have this so far. <div> <div> <label>PC Name:</label><input type="text" name="attr_character_name" /> <label>CR:</label><input type="text" name="attr_rank" /> <label>XP:</label><input type="number" name="attr_xp" /> </div> <div> <label>Guild:</label><input type="text" name="attr_guild" /> <label>Race:</label><input type="text" name="attr_race" /> </div> <div> <label>HP</label><input type="text" name="attr_hp" /> </div> </div> <hr/> <div> <div> <h3 style="margin-bottom: 10px;">Attributes</h3> <h3 style="margin-bottom: 10px;">Skills</h3> <fieldset> <select name="attr_dtype"> <option value="d4">d4</option> <option value="d6">d6</option> <option value="d8">d8</option> <option value="d10">d10</option> <option value="d12">d12</option> </select> <input type="text" name="attr_skillname" /> </fieldset> </table> </div> <div> <h3 style="text-align: center;">Derived Stats</h3> <table style="width: 100%;"> <thead> <tr> <th>Stat</th> <th>Base</th> <th>Mod</th> <th> </tr> </thead> <tbody> <tr> <td>Strength</td> <td><input type="number" name="attr_str" /></td> <td><input type="number" name="attr_str_mod" /></td> <td><input type="number" name="attr_str_max" value="@{str}+@{str_mod}" disabled="true" /></td> </tr> <tr> <td>Athletics</td> <td><input type="number" name="attr_athletics" value="(@{str_max}/3)" disabled="true" /></td> <td><input type="number" name="attr_athletics_mod" /></td> <td><input type="number" name="attr_athletics_max" value="@{athletics}+@{atletics_mod}" disabled="true" /></td> </tr> <tr> <td>Endurance</td> <td><input type="number" name="attr_endurance" value="(@{str_max}/3})" disabled="true" /></td> <td><input type="number" name="attr_endurance_mod" /></td> <td><input type="number" name="attr_endurance_max" value="@{endurance}+@{endurance_mod}" disabled="true" /></td> </tr> <tr> <td>Dex</td> <td><input type="number" name="attr_dex" /></td> <td><input type="number" name="attr_dex_mod" /></td> <td><input type="number" name="attr_dex_max" value="@{dex}+@{dex_mod}" disabled="true" /></td> </tr> <tr> <td>Disable</td> <td><input type="number" name="attr_disable" value="(@{dex_max}/3)" disabled="true" /></td> <td><input type="number" name="attr_disable_mod" /></td> <td><input type="number" name="attr_str_max" value="@{dex}+@{disable_mod}" disabled="true" /></td> </tr> <tr> <td>Operate</td> <td><input type="number" name="attr_operate" /></td> <td><input type="number" name="attr_operate_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Pow</td> <td><input type="number" name="attr_pow" /></td> <td><input type="number" name="attr_pow_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Perception</td> <td><input type="number" name="attr_perception" /></td> <td><input type="number" name="attr_perception_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Negotiation</td> <td><input type="number" name="attr_negotiation" /></td> <td><input type="number" name="attr_negotiation_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Int</td> <td><input type="number" name="attr_int" /></td> <td><input type="number" name="attr_int_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Knowledge</td> <td><input type="number" name="attr_knowledge" /></td> <td><input type="number" name="attr_knowledge_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Analyze</td> <td><input type="number" name="attr_analyze" /></td> <td><input type="number" name="attr_analyze_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Accuracy</td> <td><input type="number" name="attr_accuracy" /></td> <td><input type="number" name="attr_accuracy_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Evasion</td> <td><input type="number" name="attr_evasion" /></td> <td><input type="number" name="attr_evasion_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Resistance</td> <td><input type="number" name="attr_resistance" /></td> <td><input type="number" name="attr_resistance_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> </tbody> </table> </div> <div> <hr/> <h3>Edges</h3> <textarea name="attr_edges"></textarea> </div> </div> If its not evident I am still getting the hang of Javascript and programming in general. any help would be amazing. I have gone over over the wiki on building character sheets. I apologize for my newbness. And yes it is a bastardized form of the kitchen sink example.