ボタンをおすとフォームタグを増える実装

チャットアプリを作っていてメッセージを送る相手を選択するフォームをセレクトを使って作り、インプットタグででボタンを作り、そのボタンを押すとフォームを追加されたり削除される実装をしたのですが追加するとそのボタンを押すごとにボタンの位置が変わってしまいます。　原因はなんでしょうか？

           <select id="inputform_0" name="room[user_ids][]">
             <option value="">共有するユーザーを選択してください</option>
               <% User.where.not(id: current_user.id).each do |user| %>
             <option value=<%= user.id %>><%= user.name %></option>
               <% end %>
           </select>
           <div class = "delete_btn">
             <button id="0" style = "position: relative; left: 6%; top: -16px" onclick="deleteBtn(this)">ー</button>
           </div>
       </div>
     </div>
           <input type="button" style = "position: relative; left: 87%; top: -65px" value="＋" onclick="addForm()"> 
     <div class='memo-room-form__field'>
       <div class='memo-room-form_-left'>
        <%= link_to "戻る", :back, class: 'btn'%>
       </div>
       <div class='memo-room-form__field--right'>
         <%= f.submit  class: 'memo-room-form__action-btn'%>
       </div>
     </div>
<script>
var i = 1 ;
function addForm() {
 var src = document.getElementById("inputform_0");
 var copy = src.cloneNode(true);
 copy.id = 'inputform_' + i;
 var parent = document.getElementById('form_area');
 parent.appendChild(copy);

 var button_data = document.createElement('button');
 button_data.id = i;
 button_data.onclick = function(){deleteBtn(this);}
 button_data.innerHTML = '削除';
 var input_area = document.getElementById(src.id);
 parent.appendChild(button_data);
 
 i++ ;
}

function deleteBtn(target) {
 var target_id = target.id;
 var parent = document.getElementById('form_area');
 var ipt_id = document.getElementById('inputform_' + target_id);
 var tgt_id = document.getElementById(target_id);
 parent.removeChild(ipt_id);
 parent.removeChild(tgt_id);	
}
</script> ```