You need to double-click the button to add input dynamically with jquery

Question

I have the following script:

$(document).ready(function() {
    var i = 0;
    $("#add_row").click(function() {
        if(i <= 5)
        {
            $('#addr' + i).html("<div><input type='text' name='cirurgia' value="+i+"></div>");
            $('#input').append('<div id="addr' + (i + 1) + '">');
            i++;
        }   
    });

    $("#delete_row").click(function() 
    {
        if (i > 1) 
        {
            $("#addr" + (i - 1)).html('');
            i--;
        }
    });
});

When the user clicks on <div id="add_row">, the script adds an input and if the user clicks <div id="delete_row">, deletes the last added input.

So far the script is working correctly, but it happens that to add the 1° input the user needs to double-click the "add_row" button. Then to add 2°, 3°, 4° and 5° inputs just click 1 time, normally. Because this happens?

Simple HTML:

<input type="button" id="delete_row" value="deletar">
<input type="button" id="add_row" value="adicionar">
<br>
<div id="input">
</div>

Answer 1

The problem is on this line:

$('#addr' + i).html("<div><input type='text' name='cirurgia' value="+i+"></div>");

Who initially tries to go to the element #addr0 define the html, when it does not yet exist, as the elements are only added in the next row.

To solve this you can reverse the order of the instructions and adjust to i+1 so that the first visible element is the 1:

$('#input').append('<div id="addr' + (i+1) + '">');
$('#addr' + (i+1)).html("<div><input type='text' name='cirurgia' value="+(i+1)+"></div>");

Even simpler is to add the html you want in append, without having to take steps afterwards:

i++;
$('#input').append(`
      <div id="addr${i}" class="addr">
          <div><input type='text' name='cirurgia' value="${i}"/></div>
      </div>`);

Here I used literals template to facilitate the interpolation of i in the middle of the text, as well as being able to separate into several lines, indenting the generated html.

Note that I also added a class addr at the <div> main to assist in the removal, which should become:

$(".addr").last().remove();
i--;

Working example:

$(document).ready(function() {
  var i = 0;
  $("#add_row").click(function() {
      if(i <= 5)
      {
          i++;
          $('#input').append(`
          <div id="addr${i}" class="addr">
              <div><input type='text' name='cirurgia' value="${i}"/></div>
          </div>`);
      }   
  });

  $("#delete_row").click(function() 
  {
      if (i >= 1) 
      {
          $(".addr").last().remove();
          i--;
      }
  });
});

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

<div id="input"></div>

<button id="add_row">Add Row</button>
<button id="delete_row">Delete Row</button>