IDを指定してフォームを削除する機能をつけたい

やりたいこと

JavaScript、jQuery勉強中の初心者です。
ボタンを押すとフォームが追加され、フォームに入力された内容を自動でページの下に表示するようにしています。
追加するごとにフォームのIDは#0,#1,#2,...のように与えています。
今あるものにフォームの削除機能を搭載し、削除された分のIDを詰めるようにしたいです。
ご教授お願いします。

目指している形

例１：削除するID、フォームを指定し、削除ボタンを押すことで削除できる

[フォーム追加ボタン] [削除ボタン]
[ a ][ b ][ c ]  ←フォーム(ID#0)
[ d ][ e ][ f ]  ←フォーム(ID#1)
[ g ][ h ][ i ]  ←フォーム(ID#2)

a b c  ←フォーム(ID#0)の中身
d e f  ←フォーム(ID#1)の中身
g h i  ←フォーム(ID#2)の中身

仮に#1を削除した場合、↓の様に#1の穴を詰めて#2が#1になる

[フォーム追加ボタン] [削除ボタン]
[ a ][ b ][ c ]  ←フォーム(ID#0)
[ g ][ h ][ i ]  ←フォーム(ID#1)

a b c  ←フォーム(ID#0)の中身
g h i  ←フォーム(ID#1)の中身


例２：フォームを追加するとそのフォームの隣に削除ボタンがあり、押すことでそのIDのフォームを削除し、例１のようにIDの穴を詰める

フォーム追加ボタン
[ a ][ b ][ c ] [削除] ←フォーム(ID#0)
[ d ][ e ][ f ] [削除] ←フォーム(ID#1)
[ g ][ h ][ i ] [削除] ←フォーム(ID#2)

a b c  ←フォーム(ID#0)の中身
d e f  ←フォーム(ID#1)の中身
g h i  ←フォーム(ID#2)の中身

できれば例１のようにやりたいです。

該当のソースコード

<script src="jquery.js"></script>
<script>

$(function(){
  $('#btn').on('click',function(){
    var div_element = $('<div>').html('<p><form id="n" name="f"><input type="text" size="10" name="a" value="a"></form></p>');
    $('#add').append(div_element);
    var result=$('form').attr('id',function(){return $('form').index(this);});
    console.log(result);
    $("#out").empty();
    $(document).find('form[id] input:eq(0)').trigger('change');
  });

  $('#btn2').on('click',function(){
    var div_element = $('<div>').html('<p><form id="n" name="f"><input type="text" size="10" name="b" value="b"><input type="text" size="10" name="c" value="c"></form></p>');
    $('#add').append(div_element);
    var result=$('form').attr('id',function(){return $('form').index(this);});
    console.log(result);
    $("#out").empty();
    $(document).find('form[id] input:eq(0)').trigger('change');
  });

  $('#btn3').on('click',function(){
    var div_element = $('<div>').html('<p><form id="n" name="f"><input type="text" size="10" name="d" value="d"><input type="text" size="10" name="e" value="e"><input type="text" size="10" name="f" value="f"></form></p>');
    $('#add').append(div_element);
    var result=$('form').attr('id',function(){return $('form').index(this);});
    console.log(result);
    $("#out").empty();
    $(document).find('form[id] input:eq(0)').trigger('change');
  });

  $('#btn4').on('click',function(){
    var div_element = $('<div>').html('<p><form id="n" name="f"><input type="text" size="10" name="g" value="g"><input type="text" size="10" name="h" value="h"><input type="text" size="10" name="i" value="i"><input type="text" size="10" name="j" value="j"></form></p>');
    $('#add').append(div_element);
    var result=$('form').attr('id',function(){return $('form').index(this);});
    console.log(result);
    $("#out").empty();
    $(document).find('form[id] input:eq(0)').trigger('change');
  });

  $(document).on('change','form[id] input',function(){
    var fields = $('form').filter(function(){
      return $(this).attr('id').match(/^[0-9]+$/);
    }).map(function(){
      return $(this).find(':text').map(function(){
        return $(this).val();
      }).get().join(" ");
    }).get();
    $("#out").html(fields.join("<br>\n"));
    console.log(fields);
  });
});


</script>
<div>
  <input type="button" value="あ" id="btn">
  <input type="button" value="い" id="btn2">
  <input type="button" value="う" id="btn3">
  <input type="button" value="え" id="btn4">
</div>
<div id="add"></div>
<div id="out"></div>