Form elemanı çoğaltma ve silme | Cevap #8663

var x=1;
  function yeniekle(){
      x=x+1;
      
      var icerik=' '+
    '<div class="card card-default">'+
      '<div class="card-header">'+
        '<h3 class="card-title">'+x+'. Yazar Bilgisi:</h3>'+
        '<div class="card-tools">'+
          '<button type="button" class="btn btn-tool" data-card-widget="collapse">'+
           ' <i class="fas fa-minus"></i>'+
         ' </button>'+
        '</div>'+
     ' </div>'+
   
      '<div class="card-body">'+
        '<div class="input-group mb-3">'+
          '<div class="input-group-prepend">'+
           '<span class="input-group-text">ADI: </span>'+
          '</div>'+
          '<input type="text" class="form-control" name="adi'+x+'">'+
        '</div>'+

'<hr>';
        $(icerik).insertBefore('.sonra');
        
  }

<div class="sonra"></div>

<div class="col-lg-12 ">
    <div class="well">
        <button type="button" class="btn btn-info btn-circle" style="float:right;" onclick="yeniekle();">
          <i class="fa fa-plus"></i>
        </button>
        <p>Yeni <b>Yazar</b> eklemek için <b>+</b> butonuna tıklayın</p>
    </div>
</div>

Yukardaki script ile form verilerimi submit etmeden önce yazar adını çoğaltıyorum.
Artı butonuna tıklayıp fazladan yazar bilgisi div i açarsam bunu nasıl geri alırım? ve Açılan sonraki divlerde sıranın yeniden düzgün ilerlemesini nasıl kontrol ederim.
Örneğin iki tane daha yazar adı ekleyecekken ben artı butonuna fazladan tıklayıp üç yazar divi açtım. Üçüncüyü nasıl geri alırım?
Yada yanlışlıkla ikinciyi kapattım. üç numaralı divin ikinci yazar divi olarak değişmesini nasıl sağlarım

Yukardaki kodu istediğim gibi nasıl düzenleyebilirim? Ya da daha düzgün ve kullanışlı kod konusunda yardım eder misiniz?