没有静态输入，动态输入下拉列表不起作用

Question

现在代码工作正常但我希望代码没有静态输入，如下所示，如果我删除它下拉列表没有显示在这里是一个测试它的链接http://89.69.172.125/cms2.0/    

<script src="../LeagueNotes/js/jquery.min.js"></script>
<script src="../LeagueNotes/js/champions_list.js"></script>
<script src="dynamicForms.js"></script>

<?php
    if(isset($_POST['submit'])){
        $x=1;
        foreach($_POST['champion'] as $champion){
            echo $champion.'<br>';
            if(!empty($_POST['SpellDescription'][$x])){
                foreach($_POST['SpellDescription'][$x] as $index=>$SpellDescription){
                    echo $_POST['change'][$x][$index].' '.$_POST['championSpell'][$x][$index].'<br>';
                    echo $SpellDescription.' '.$_POST['SpellChange'][$x][$index].'<br><br>';
            }}
            $x++;
        }

    }else{
?>
<a href="#" id="AddChampion">Add Champion</a>
<form name="second_form" id="second_form" method="POST">
    <div id="ChampionInput">
     <input type="text" class="ChampionInput" list="champions" name="champion[]" placeholder="Champion">
     <datalist id="champions"></datalist>
    </div>
    <br><br>
    <input type="submit" name="submit">
</form>
<?php 
    }
?>

$(document).ready(function(){
    championNumber = 1;
    for(var key in champions){
    if(champions.hasOwnProperty(key)){
        $('#champions').append('<option value="' + key + '">');
    }}
    $('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>\
             <a href="#" class="RemoveSpell">Remove Spell</a>\
             <br>\
         <div>');
        championNumber++;
    });
    $('div#ChampionInput').on('click', 'a.Remove',function(){
        $(this).parent('div.Champion').remove();

    });
    $('div#ChampionInput').on('click', 'a.AddSpell',function(){
        $(this).after(
        '<div class="Spell">\
            <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>\
            <textarea type="text" size="20" name="SpellDescription['+$(this).parent('div').data('id')+'][]" placeholder="Enter Description" />\
            <select name="SpellChange['+$(this).parent('div').data('id')+'][]">\
               <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#ChampionInput').on('click', 'a.AddChange',function(){
        $(this).after(
       '<div class="Change">\
           <br>\
            <textarea type="text" size="20" name="SpellDescription['+$(this).parent('div').data('id')+'][]" placeholder="Enter Description" />\
            <select name="SpellChange['+$(this).parent('div').data('id')+'][]">\
               <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="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();
    });

});