How to Add Array Id in each group of inputs dynamically

Question

I am generating a group of fields dynamically using add and remove button.

I want group id as input name array identifier in the group of the array, like when I click add, it will add a group of input fields.

It should be like:

<input name="daydetails[1][dayno]">
<textarea name="daydetails[1][activity]"></textarea>

When click add next, it should be like:

<input name="daydetails[2][dayno]">
<textarea name="daydetails[2][activity]"></textarea>

Here below is my HTML Part that contains div with a group of input fields:

<div id="type_container"> </div>
<div id="fieldgroup" class="hide">
  <div class="row form-group type-row" id="">
    <div class="col-md-2 control-label">
      <label for="username" class="control-label">
        Day # :
      </label>
    </div>
    <div class="col-md-10">
      <input type="text" placeholder="Day No" name="daydetails[][dayno]">
    </div>
    <div class="col-md-2 control-label">
      <label for="username" class="control-label">
        Description :
      </label>
    </div>
    <div class="col-md-10">
      <textarea class="tinymce-enabled-message-new" cols="90" rows="10" id=""
        name="daydetails[][activity]">Test Input</textarea>
    </div>
    <div class="col-md-1 control-label">
      <a class="remove-type pull-right" targetDiv="" data-id="0" href="javascript: void(0)">
        <i class="glyphicon glyphicon-trash">
        </i>
      </a>
    </div>
  </div>
</div>

This is my JQuery script part:

<script type="text/javascript">
  $(document).ready(function() {
    function applyMCE() {
      tinyMCE.init({
        mode: "textareas",
        editor_selector: "tinymce-enabled-message"
      });
    }

    function AddRemoveTinyMce(editorId) {
      if (tinyMCE.get(editorId)) {
        tinyMCE.EditorManager.execCommand("mceFocus", false, editorId);
        tinyMCE.EditorManager.execCommand("mceRemoveEditor", true, editorId);
      } else {
        tinymce.EditorManager.execCommand("mceAddEditor", false, editorId);
      }
    }
    applyMCE();
    $("a.toggle-tinymce")
      .die("click")
      .live("click", function(e) {
        AddRemoveTinyMce("description1");
        var lbl = $(this).text() == "Off" ? "On" : "Off";
        $(this).text(lbl);
      });
    $("a.add-type")
      .die("click")
      .live("click", function(e) {
        e.preventDefault();
        var content = jQuery("#fieldgroup .type-row"),
          element = null;
        for (var i = 0; i < 1; i++) {
          element = content.clone();
          var divId = "id_" + jQuery.now();
          element.attr("id", divId);
          element.find(".remove-type").attr("targetDiv", divId);
          element
            .find(".tinymce-enabled-message-new")
            .attr("id", "txt_" + divId);
          element.appendTo("#type_container");
          AddRemoveTinyMce("txt_" + divId);
        }
      });

    jQuery(".remove-type")
      .die("click")
      .live("click", function(e) {
        var didConfirm = confirm("Are you sure You want to delete");
        if (didConfirm == true) {
          var id = jQuery(this).attr("data-id");
          var targetDiv = jQuery(this).attr("targetDiv");
          jQuery("#" + targetDiv).remove();
          // }
          return true;
        } else {
          return false;
        }
      });
  });
</script>

Answer 1

To solve this issue you can use JQuery append and remove function. May I suggest you use button instead of a. Using a hyperlink is OK but it is semantically incorrect. FYI die is depreciated and has been removed since version 1.9. Thus, it is not needed here, $(...).on('click', ..) will do. You can see a full working codepen here, I'm using buttons instead of hyperlinks.

HTML Sample

<div id="inputsContainer" class="col-md-10">
  <input type="text" placeholder="Day No" name="daydetails[][dayno]" />
</div>

<div id="textareasContainer" class="col-md-10">
  <textarea class="tinymce-enabled-message-new" cols="40" rows="3" name="daydetails[][activity]">
    Test Input
  </textarea>
</div>
<div>
  <button onclick="onAddClick()">Add</button>
  <button onclick="onRemoveClick()">Remove</button>
</div>

Javascript

<script type="text/javascript">
  const dayDetails = [{ dayno: "dayno-0", activity: "activity-0" }];

  function generateInput(name) {
    return '<input type="text" placeholder="Day No" name="' + name + '" />';
  }

  function generateTextarea(name) {
    return (
      '<textarea class="foo-bar" cols="40" rows = "3" name="' + name + '">'
    );
  }

  function onRemoveClick() {
    const item = dayDetails.pop();
    const dayno = item.dayno;
    const activity = item.activity;

    try {
      $('input[name=' + dayno + ']').remove();
      $('textarea[name=' + activity + ']').remove();
    } catch (e) { }
  }

  function onAddClick() {
    const dayno = dayDetails.length;
    const activity = 'activity-' + dayDetails.length;
    dayDetails.push({ dayno: dayno, activity: activity });
    $("#inputsContainer").append(generateInput(dayno));
    $("#textareasContainer").append(generateTextarea(activity));
  }
</script>