JSFiddle - React, Tailwind, and code Playground

by BinaryMuse

HTML

<table>
  <tr>
    <td>Strength</td>
    <td><input type="text" size="4" value="12" /></td>
    <td><input type="button" value="Roll!" /></td>
  </tr>
  <tr>
    <td>Intellect</td>
    <td><input type="text" size="4" value="12" /></td>
    <td><input type="button" value="Roll!" /></td>
  </tr>
  <tr>
    <td>Charisma</td>
    <td><input type="text" size="4" value="12" /></td>
    <td><input type="button" value="Roll!" /></td>
  </tr>
</table>

CSS

table td, input[type=button] {
  padding: 2px 5px;
}

JavaScript

$(function() {
  // Find every button on the page and add a "click" handler to each one
  $("input[type=button]").click(function() {
    // When the button is clicked, find the "tr" element that holds it
    // and then find the text box inside that -- this gets us to the right input box
    var text_box = $(this).parents("tr").find("input[type=text]");
    // Get the current value of that box
    var value = parseInt(text_box.val());
    // Roll a random number and add it to the current value
    var new_value = value + Math.ceil(Math.random() * 6);
    // Set the box to the new value
    text_box.val(new_value);
  });
});