Sequential number in a dynamic form

To do this, simply create a counter in the event:

Jquery:

$(function() {
   $('#remove').on('click', function() {
     var bt = $(this);
     ($('.history').length == 2) ? bt.hide() : bt.show();
    $('.history:last-child').remove();
  });
     $('#add').on('click', function() {

       var bt = $('#remove');
       var i = $('.history').length + 1;
       (i == 1) ? bt.hide() : bt.show();
       var content = [
                '<div class="history" id="item_',i,'">\
                  <h3>HISTÓRICO PROFISSIONAL</h3>\
                    <label>Empresa ',i,'</label>\
                    <input type="text"  name="empresa[]"\ placeholder="Empresa" />\
                    <label>Cargo</label>\
                    <input type="text"  name="cargo[]"\ placeholder="Cargo" />\
                    <label>Periodo</label>\
                    <input type="text"  name="periodo[]"\ placeholder="Periodo" />\
                    <label>Atividades</label>\
                    <textarea rows="4" cols="50"\ name="atividades[]" ',
                    'placeholder="Atividades" ></textarea>\
                 <div>'
            ].join('');
            $('#div_dados_historico').append(content);

     });
 //o trigger é para adicionar o primeiro item do formulário
 $('#add').trigger('click');
});

HTML:

<div id="div_dados_historico">
</div>
 <center>
 <div>
<button id="add">+ MAIS</button>
<button id="remove">- MENOS</button>
</div></center>

Example that I made using jquery: JSFIDDLE

Using pure javascript:

function duplicarCampos(){
    var clone = document.getElementById('div_dados_historico').cloneNode(true);
    var destino = document.getElementById('destino');
  var t = document.querySelectorAll(".el_cloned").length;
  clone.querySelector("label").innerHTML = 'Empresa '+ parseInt(t);
    destino.appendChild (clone);
    var camposClonados = clone.getElementsByTagName('input');
    for(i=0; i<camposClonados.length;i++){
        camposClonados[i].value = '';
    }
  t++;
}
function removerCampos(id){
  var t = document.querySelectorAll(".el_cloned").length;
    var node1 = document.getElementById('destino');
    node1.removeChild(node1.lastChild);
   t--;
 node1.lastChild.querySelector("label").innerHTML = 'Empresa '+ parseInt(t-1);
}

Your HTML would look like this:

<div id="div_dados_historico">
    <div class="el_cloned">
      <h3>HISTÓRICO PROFISSIONAL</h3>
         <label>Empresa</label>
         <input type="text"  name="empresa1[]" placeholder="Empresa" />
         <label>Cargo</label>
         <input type="text"  name="cargo1[]" placeholder="Cargo" />
         <label>Periodo</label>
         <input type="text"  name="periodo1[]" placeholder="Periodo" />
          <label>Atividades</label>
          <textarea rows="4" cols="50"  name="atividades1[]" placeholder="Atividades" ></textarea>
         <center><div>           
          <img  src="<?php echo $URL ?>site/view/images/add.jpg" style="cursor: pointer;" onclick="duplicarCampos();">
          <img  src="<?php echo $URL ?>site/view/images/cross.jpg" style="cursor: pointer;" onclick="removerCampos(this);"> 
        </div></center>
     </div>
</div>
<div id="destino"></div>

Example based on your template: JSFIDDLE