Issue using Append

Issue using Append

Hello Everone, 

I created the code below, however, I believe I should use something like an array because when I call the function several times, then it's appending the same name(xnome) and id.

  1.     //EXAMS
  2.     $('#idexame').change(function () {
  3.       
  4.       var doc = document.getElementById("idexame");
  5.       
  6.       $("#xnome").html(doc.options[doc.selectedIndex].text);
  7.       
  8.        $(".selecionado").append('<div class="alert alert-warning alert-dismissible">
  9.       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
  10.       <h4 id="xnome">'+doc.options[doc.selectedIndex].text+'</h4>
  11.       <textarea name="sexames[]" class="form-control" rows="2" placeholder="Observação ..."></textarea>
  12.       </div>
  13.       <input type="hidden" name="exameid[]" value="'+doc.options[doc.selectedIndex].value +'"></input');
  14.     });