HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dynamic focusin</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 420px; }
    #dynamic-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
    input { padding: 10px 12px; border: 2px solid #cbd5e1; border-radius: 6px; font-size: 16px; }
    input.active { border-color: #10b981; background: #ecfdf5; }
    #add-field { padding: 8px 14px; background: #6366f1; color: #fff; border: none; border-radius: 6px; cursor: pointer; width: fit-content; }
    #status { margin-top: 10px; color: #334155; font-size: 14px; }
  </style>
</head>
<body>
  <div id="dynamic-form">
    <input type="text" name="field1" placeholder="Field 1">
    <input type="text" name="field2" placeholder="Field 2">
  </div>
  <button type="button" id="add-field">Add field</button>
  <div id="status">Add a field, then focus it — same handler applies.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    var count = 2;
    $("#dynamic-form").on("focusin", "input", function() {
      $("#dynamic-form input").removeClass("active");
      $(this).addClass("active");
      $("#status").text("Active: " + $(this).attr("name"));
    });
    $("#add-field").on("click", function() {
      count += 1;
      $("#dynamic-form").append('<input type="text" name="extra' + count + '" placeholder="Extra ' + count + '">');
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery focusin event — dynamic form fields (Try It)