JSFiddle - React, Tailwind, and code Playground

by Patrick Gregorio

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="container">
  <form id="search" action="" method="post">
    <input type="text" placeholder="Search">
    <input type="submit" value="Search">
  </form>
</div>

CSS

.prod-form {
  display: inline-block;
  width: 20%;
  text-align: center;
  background-color: #D9D9D9;
  margin: 5px;
  padding-bottom: 15px;
}

JavaScript

$(document).ready(function() {
  $("#search").on("submit", function(e) {
    e.preventDefault(); // Just to prevent the form from actually submitting.

    // Get the JSON and add the elements.
    for (var i = 0; i < 4; i++) {
      var form = '<form action="" method="post" id="prod-' + i + '" class="prod-form">';
      form += '<p>Product [' + i + ']</p>';
      form += '<input type="submit" value="Submit Product Form">';
      form += '</form>';

      $(form).appendTo($("#container"));
    }
  });

  // The code below is what you're probably interested at.
  // Adding an event to a dynamically added form.
  $("#container").on("submit", ".prod-form", function(e) {
  	e.preventDefault();
    $.ajax({
      url: "",
      type: 'post',
      dataType: 'json',
      data: $(this).serialize(),
      success: function(data) {
        console.log(data);
        alert('success');
      }
    });
  });
});