Add button to add fields

Question

I’m trying to implement a button to add extra fields, in case I’m creating an activity report where it contains 5 fields. When the button is clicked it adds 5 more of these same field.

Currently I have:

Javascript

$(function () {
     var scntDiv = $('#dynamicDiv');
     $(document).on('click', '#addInput', function () {
          $('<p>'+
            '<input type="text" id="inputeste" size="20" value="" placeholder="" /> '+
            '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
            '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
            '</a>'+
            '</p>').appendTo(scntDiv);
                        return false;
      });
      $(document).on('click', '#remInput', function () {
            $(this).parents('p').remove();
            return false;
       });
});

HTML

<div id="dynamicDiv"></div>

How I return several days, and each day may exist N tasks, when I click add fields, only the first day is added, and in each day I have a button.

EDIT 1:

In my case, I have the days generated dynamically, and each day I have a button to add, when to on day 21 for example and I click add, it is added normally because it is my first field, if to on day 22 and click to add it adds the fields in day 21 panel.

How do I know which day to add?

Answer 1

I edited your script to make the button work. When you click add +5, it adds 5 inputs.

$(function () {
     var scntDiv = $('#dynamicDiv');
     $(document).on('click', '#addInput', function () {
          for (var i = 0; i < 5; i++){
            $('<p>'+
            '<input type="text" id="inputeste" size="20" value="" placeholder="" /> '+
            '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
            '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
            '</a>'+
            '</p>').appendTo(scntDiv);
           }
                        return false;
      });
      $(document).on('click', '#remInput', function () {
            $(this).parents('p').remove();
            return false;
       });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="addInput">add +5</button>
<div id="dynamicDiv"></div>

Answer 2

I believe it was necessary to add name="inputeste[]" inputs to be able to retrieve them in an application!

Library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Script

$(function () {
     var scntDiv = $('#dynamicDiv');
     $(document).on('click', '#addInput', function () {
          for (var i = 0; i < 5; i++){
            $('<p>'+
            '<input type="text" id="inputeste" name="inputeste[]" size="20" value="" placeholder="" /> '+
            '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
            '<span class="glyphicon glyphicon-minus" aria-hidden="true">remover</span> '+
            '</a>'+
            '</p>').appendTo(scntDiv);
           }
                        return false;
      });
      $(document).on('click', '#remInput', function () {
            $(this).parents('p').remove();
            return false;
       });
});

Example getting form data with PHP

The form

<form action="" method="post">
<button type="button" id="addInput">add +5</button>
<div id="dynamicDiv"></div>
<input type="submit">
</form>

PHP

if (isset($_POST['inputeste'])){

 $inputeste= $_POST['inputeste'];

   if (!empty($inputeste)) {                
       $qtd = count($inputeste);
       for ($i = 0; $i < $qtd; $i++) {
         if ($inputeste[$i]!=""){
            echo $inputeste[$i];
            echo "<br>";
         }

       }
   }
}

If not using the remove link use only the required part of the code

$(function () {
     var scntDiv = $('#dynamicDiv');
     $(document).on('click', '#addInput', function () {
          for (var i = 0; i < 5; i++){
            $('<p>'+
            '<input type="text" id="inputeste" name="inputeste[]" size="20" value="" placeholder="" /> '+
            '</p>').appendTo(scntDiv);
           }
                        return false;
      });
});

Answer 3

The solution was to make mine div dynamic.

HTML

<div id="dynamicDiv<?php echo $_Indice ?>"></div>

Javascript

$(function () {
     var dynamicDiv = ('#dynamicDiv');
     $(document).on('click', '.addInput', function () {
          var dynamicId = $(this).attr("id");
          $('<p>'+
            '<input type="text" name"inputteste[]" id="inputeste" size="20" value="" placeholder="" /> '+
            '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
            '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
            '</a>'+
            '</p>').appendTo(dynamicDiv + dynamicId);
            return false;
       });
       $(document).on('click', '#remInput', function () {
            $(this).parents('p').remove();
            return false;
       });
});