title: Duplicate section of PHP Form with different name identifiers
body: <p>I've created a PHP form that looks like this, to add details about faculty members.
  <img src="https://i.stack.imgur.com/0F4dr.png" alt="enter image description here"></p>
  
  <p>I want to be able to duplicate this section (inside the borders) with different IDs. Can I store each member's details in an array?</p>
  
  <p>This is what it should look like after adding another member.
  <img src="https://i.stack.imgur.com/Uqd9S.png" alt="enter image description here"></p>
  
  <p>My code is below:</p>
  
  <pre><code>&lt;html&gt;
      &lt;style&gt;
      .container { width:21%; border:1px solid #d3d3d3; }
      .container div { width:99%; }
      .container .header { background-color:#d3d3d3; padding: 2px; cursor: pointer; font-weight: bold; }
      .container .content { display: none; padding : 5px; }
      .faculty {border: 1px black solid;}
      &lt;/style&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;script src="jquery-1.11.2.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form action="added.php" method="post"&gt;
              &lt;div class="container"&gt;&lt;div class="header"&gt;Faculty&lt;/div&gt;
                  &lt;div class="content"&gt;
                      &lt;input type="button" id="f_add" value="Add Member" /&gt; &lt;input type="button" id="f_rem" value="Remove Last" /&gt;
                      &lt;div class="faculty" name="f_1" id="f_1"&gt;
                          Name: &lt;input type="text" name="f_name_1" required /&gt;&lt;br&gt;
                          Role:&amp;nbsp;&amp;nbsp; &lt;input type="text" name="f_role_1" required /&gt;&lt;br&gt;
                          Email: &lt;input type="text" name="f_email_1" /&gt; &lt;br&gt;
                          Biography: &lt;textarea name="f_bio_1" rows="5" cols="38"&gt;&lt;/textarea&gt;&lt;br&gt;
                          Office Hours:&lt;br&gt;&lt;input type="checkbox" name="f_mon_0" /&gt; Mon &lt;input type="checkbox" name="f_tue_0" /&gt; Tue &lt;input type="checkbox" name="f_wed_0" /&gt; Wed &lt;input type="checkbox" name="f_thu_0" /&gt; Thu &lt;input type="checkbox" name="f_fri_0" /&gt; Fri &lt;br&gt;
                          Image: &lt;input type="file" name="f_image_0" /&gt;&lt;br&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;input type="submit" value="Submit"/&gt;
              &lt;script&gt;
                  $(".header").click(function () {
                      $(this).next().slideToggle(500, function () {});
                  });
                  $("#f_add").click(function () {
                      $(".faculty").clone().prop({name: "f2", id: "f2"}).appendTo(".content");
                  });
                  $("#f_rem").click(function () {
  
                  });
              &lt;/script&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>