Improvements in dynamic content

Question

Good afternoon, I have a function in jquery that I have been improving since I discovered it in forums, it serves to create elements dynamically using jquery

/* função que insere e remove cadeia de inputs */
    var inputnew = 0;
    function new_input() {
        inputnew++;
        $('<li class="formation '+ inputnew +'">'
        + '<input placeholder="Modalidade" onkeyup="this.value=capitalize(this.value);" />'
        + '<input type="number" placeholder="Data" />'
        + '<input placeholder="Instituição" onkeyup="this.value=capitalize(this.value);" />'
            + '<span class="remove cursor_pointer">x</span>'
        + '</li>').prependTo($('section.duo div.academic_formation div.formations')); }

    $('span.remove').live('click', function() {
        if(inputnew > 1) {
            $(this).parents('li').remove();
        inputnew--; } });
    $(document).ready(function() { new_input(); });
/* função que insere e remove cadeia de inputs */

I am facing the following problems, I am not experienced in jquery so I could not pass of this, I have already improved enough the function that I found and studied but I am with two problems, the main one is, apparently the function . live does not work in newer jquery, so I am required to use 1.8.3 for this function to work and the second problem is that, I need to create within the new_input function, all inputs and everything else that I wish to appear in the listed div, that is, it becomes difficult to edit and or improve and also make some functions work together, the problem of the version of jquery if it is complicated, or I don’t care much, to use in 1.8.3 without problems, but what I really want is for me to be able to scan the div that has the elements that I want to duplicate.

in case, I would have

<div class="formations">
 <li class="formation">
        <input placeholder="Modalidade" onkeyup="this.value=capitalize(this.value);" />
        <input type="number" placeholder="Data" />
        <input placeholder="Instituição" onkeyup="this.value=capitalize(this.value);" />
  <span class="remove cursor_pointer">+</span>
 </li>
</div>

html in the page, normally written and then a function that by clicking on an ADD for example, clone this excerpt below

Answer 1

In relation to .live() just change to .on() and you can already use newer versions of jQuery.

Regarding copy/create content you can use .clone() to exactly copy what you want. There is still template in HTML that allows you to have HTML in the page that is not active, it is only used to be copied.

An example would be like this:

var inputnew = 0;

function new_input() {
  inputnew++;
  var template = document.getElementById('formations');
  var clone = document.importNode(template.content, true);
  $(clone).prependTo('section.duo div.academic_formation');
}

$(document).on('click', 'span.add', new_input);
$(document).on('click', 'span.remove', function() {
  if (inputnew > 1) {
    $(this).parents('li').remove();
    inputnew--;
  }
});

$(document).ready(new_input);

.cursor_pointer {
  cursor: pointer;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template id="formations">
  <div class="formations">
  <li class="formation">
    <input placeholder="Modalidade" onkeyup="this.value=capitalize(this.value);" />
    <input type="number" placeholder="Data" />
    <input placeholder="Instituição" onkeyup="this.value=capitalize(this.value);" />
    <span class="add cursor_pointer">+</span><span class="remove cursor_pointer">-</span>
  </li>
</div>
</template>

<section class="duo">
  <div class="academic_formation">
    <div class="formations"></div>
  </div>
</section>