Add an element (input) in div where the js function has been fired

I’d like to insert an input in an adjacent div where the JS function has been fired.

JavaScript: to add an element (input in this case) jQuery: to detect where the javascript function has been fired.

The issues I’m facing :

1. The input is created after the second click.
2. All the inputs move from one div to another on each click …

I don’t understand why this happens! Do you guys have an idea why everything messes up? Thanks a lot.

var ct = 0; // numeric identifier for training section
var lec = 0; // numeric identifier for lectures

function addLecture() {
  lec++;

  var div = document.createElement('div');
  div.setAttribute('id', 'lecture'.concat(lec))

  var input = document.createElement('input');
  lecture.setAttribute('type', 'text')

  div.appendChild(input)

  var id;
  jQuery('.info_container').click(function(id) {
    var id = jQuery(this).attr("id");
    document.getElementById(id).querySelector('[id ^= "lectures_container"]').insertAdjacentElement('beforeend', div);
  });
}

[id^="row"] {
  padding: 10px;
  margin: 10px;
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="row-4" class="info_container">
  <div id="lectures_container4">
  </div>
  <a class="btn btn-add" href="javascript:addLecture()"><span class="fa fa-plus"></span> Add an input</a>
</div>


<div id="row-5" class="info_container">
  <div id="lectures_container5">
  </div>
  <a class="btn btn-add" href="javascript:addLecture()"><span class="fa fa-plus"></span> Add an input</a>
</div>

Full code and live example in the JS fiddle right here: https://jsfiddle.net/t7x350d9/

Answer

Your code is much more complicated than it needs to be.

Firstly when dealing with repeated HTML structures do not use id attributes. Use the same class on them all to group them. If you need to identify each one, listen for the event and use the target to determine which element was interacted with. In the example below this can be done through the target property of the event which is raised.

Secondly, to achieve your goal simply use an unobtrusive event handler in your JS (not an onclick attribute in the HTML) and append() the new HTML. Try this:

jQuery($ => {
  $('.info_container .btn').on('click', e => {
    e.preventDefault();
    $(e.target).closest('.info_container').find('.lectures_container').append('<div class="lecture"><input type="text" /></div>');
  });
});

.info_container {
  padding: 10px;
  margin: 10px;
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="info_container">
  <div class="lectures_container"></div>
  <a href="#" class="btn btn-add">
    <span class="fa fa-plus"></span> Add an input
  </a>
</div>
<div class="info_container">
  <div class="lectures_container"></div>
  <a href="#" class="btn btn-add">
    <span class="fa fa-plus"></span> Add an input
  </a>
</div>