JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div class="container">
  <h3
    style="text-align: center; border-bottom: 1px solid rgb(204, 204, 204); --darkreader-inline-border-bottom: var(--darkreader-border-cccccc, #3e4446);"
    data-darkreader-inline-border-bottom=""
  >
    IP Protection
  </h3>

  <h4>Deny</h4>

  <p>
    Block <code>ALL</code> IP addresses or an IP address
    <code>123.456.789.123</code> or multiple IP addresses<code
      >123.456.789.123,123.456.789.124,123.456.789.125</code
    >
  </p>

  <h4>Allow</h4>

  <p>
    If <cite>Deny</cite> is set to <code>All</code>, and you want your own IP
    address allowed, you can set your IP address or other IP addresses allowed.
  </p>

  <table style="width: 100%;">
    <tbody>
      <tr class="ip-rules">
        <td>
          <label>
            <select name="ip-rule">
              <option selected value="deny">deny</option>
              <option value="allow">allow</option>
            </select>
          </label>
        </td>
        <td>
          <label>
            <input
              name="ip"
              type="text"
              class="deny"
              value=""
              placeholder="XXX.XXX.XXX.XXX"
            />
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <button onclick="duplicateRow()">Add another rule</button>
        </td>
      </tr>
    </tbody>
  </table>

  <input type="submit" value="Set IP protection" />
</div>

CSS

html,body {
  color: #454545;
}

.container {
  margin-top: 1%;
}

JavaScript

// Counter to track the number of duplicates
    let duplicateCount = 0;

    // Function to duplicate the table row
    function duplicateRow() {
        duplicateCount++;

        // Get the original row
        const originalRow = document.querySelector('tr.ip-rules');

        // Clone the entire row (deep clone)
        const newRow = originalRow.cloneNode(true);

        // Update the `name` attributes for the select and input
        const select = newRow.querySelector('select[name="ip-rule"]');
        const input = newRow.querySelector('input[name="ip"]');

        select.name = `ip-rule-${duplicateCount}`;
        input.name = `ip-${duplicateCount}`;

        // Clear the values (optional)
        //select.value = '';
        input.value = '';

        // Insert the new row after the original
        originalRow.parentNode.insertBefore(newRow, originalRow.nextSibling);
    }

    // Example: Call this function to duplicate the row
    duplicateRow();