添加新文本字段，动态选择和复选框

Question

我尝试使用选择列表 复选框和文本字段加上一个添加按钮。

这个表格必须像这样工作：

• 步骤1加载页面时，必须禁用文本字段并选择 字段已激活
• Step2当我选中复选框时，文本字段为 启用并选择已禁用。
• Step3当我按下添加按钮时，它应该添加：1个复选框，1个文本字段和1个选择选项。

一切正常，直到我按下添加按钮。初始字段运行良好，但添加的字段没有。我的意思是当我按复选框时，第1步和第2步不再执行。

我的PHP和HTML

<hr><div class="container1">
<button class="add_form_field">Add New Field &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span></button>
    <input type = "checkbox" name = "ckautor[]" checked = "ckautor" onclick = "f_autor(this.checked)">Adauga Autor:<br />                   
<div><select name = "select_aut[]" id = "select_aut" >
                    <?php
                        $select_autor = mysqli_query(conectare(), "SELECT nume_autor FROM autor");
                        while ($row = mysqli_fetch_array($select_autor)){
                            ?><option><?php
                        echo $row["nume_autor"];
                        ?></option><?php    
                        }
                    ?>
</select></div>                     
        <p>Autor:</br>
            <input type = "text" name = "nume_autor[]" id = "nume_autor" size = "40" disabled = "disabled"></p>
</div><hr>

我的JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var max_fields      = 10;
    var wrapper         = $(".container1");
    var add_button      = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e){
        e.preventDefault();
        if(x < max_fields){
            x++;
            $(wrapper).append('<div><input type = "checkbox" name = "ckautor[]" checked = "ckautor" onclick = "f_autor(this.checked)">Adauga Autor:<br /><div><select name = "select_aut[]"><?php $select_autor = mysqli_query(conectare(), "SELECT nume_autor FROM autor");while ($row = mysqli_fetch_array($select_autor)){ ?> <option> <?php echo $row["nume_autor"]; ?> </option> <?php } ?></select> </div> <input type="text" name="nume_autor[]" size = "33" disabled = "disabled"/><a href="#" class="delete"> Delete </a> </div>'); //add input box
        }
  else
  {
  alert('Maximum limit is 10!')
  }
    });

    $(wrapper).on("click",".delete", function(e){
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>
---------------------------------------------------------------------------------------
function f_autor(ckautor){
    if(!ckautor){
        document.getElementById('select_aut').disabled = true;
        document.getElementById('nume_autor').disabled = false;
    }
    else{
        document.getElementById('select_aut').disabled = false;
        document.getElementById('nume_autor').disabled = true;
    }
}