用jquery按正确顺序动态插入输入

我现在的主要问题是新输入叫做new change总是插入到第一个输入之后所以不是1 2 3 4 5而是1 5 4 3 2 1

另一件事是，在点击添加更改锚后，删除法术会在所有。changediv

这里是工作JS-fiddle http://jsfiddle.net/9jbngbhb/

这里是html，没什么特别的

    <a href="#" id="AddChampion">Add Champion</a>
    <form name="second_form" id="second_form" method="POST">
        <div id="ChampionInput">
        </div>
        <br><br>
        <input type="submit" name="submit">
    </form>

这里是jquery:

$(document).ready(function(){
    championNumber = 1;
    spellNumber=1;
    $('a#AddChampion').on('click',function(){
        $('div#ChampionInput').append(
        '<div class="Champion" data-id="'+championNumber+'">'
             <a href="#" class="Remove">Remove</a>'
             <br>'
             <input type="text" class="ChampionInput" list="champions" name="champion[]" placeholder="Champion '+championNumber+'">'
             <datalist id="champions"></datalist>'
             <a href="#" class="AddSpell">Add Spell</a>'
             <br>'
         <div>');
        championNumber++;
    });
    $('div#ChampionInput').on('click', 'a.Remove',function(){
        $(this).parent('div.Champion').remove();
    });
    $('div#ChampionInput').on('click', 'a.AddSpell',function(){
        $(
        '<div class="Spell" data-id="'+$(this).children( "div.Change").length+'">'
            <select name="change['+$(this).parent('div').data('id')+'][]">'
               <option value="Passive">Passive</option>'
               <option value="Q" selected>Q</option>'
               <option value="W">W</option>'
               <option value="E">E</option>'
               <option value="R">R</option>'
            </select>'
            <input type="text" name="championSpell['+$(this).parent('div').data('id')+'][]">'
            <br>'
            <div class="Change">'
            <textarea type="text" size="20" name="SpellDescription['+$(this).parent('div').data('id')+'][]" placeholder="Enter Description" />'
                <select name="SpellChange['+$(this).parent('.Champion').data('id')+'][0][]">'
                   <option value="buff">Buff</option>'
                   <option value="nerf">Nerf</option>'
                   <option value="new">New</option>'
                   <option value="change">Change</option>'
                   <option value="bugfix">Bugfix</option>'
                </select>'
                <a href="#" class="AddChange">Add Change </a>'
                <a href="#" class="RemoveSpell">Remove Spell</a>'
            </div>'
        </div>'
        ').appendTo('.Champion[data-id='+$(this).parent('div').data('id')+']');
    });
    $('div#ChampionInput').on('click', 'a.AddChange',function(){
        //alert($(this).parent("div.Spell").children( "div.Change").length);
        $(this).after(
           '<div class="Change">'
                <textarea type="text" size="20" name="SpellDescription['+$(this).parent('div').data('id')+'][]" placeholder="Enter Description" />'
                <select name="SpellChange['+$(this).parent().parent('div').data('id')+']['+$(this).parent("div.Spell").children( "div.Change").length+'][]">'
                   <option value="buff">Buff</option>'
                   <option value="nerf">Nerf</option>'
                   <option value="new">New</option>'
                   <option value="change">Change</option>'
                   <option value="bugfix">Bugfix</option>'
                </select>'
                <a href="#" class="RemoveChange">Remove Change</a>'
            </div>');
    });
    $('div#ChampionInput').on('click', 'a.RemoveSpell',function(){
        $(this).closest('.Spell').remove();
    });
    $('div#ChampionInput').on('click', 'a.RemoveChange',function(){
        $(this).closest('.Change').remove();
    });
});