使用jquery clone复制表单组

Question

我正在开发一个允许用户向特定订阅添加多个条件的网站。

继承我的表格

<div class="container">
  <div class="row">
    <div class="col-sm-12">
        <h2>Create Subscription</h2>
        <form action="/subscription" method="post">
            <div class="form-group">
                <label>Subscription Nickname</label>
                <input type="text" name="nickname" class="form-control" value="" />
            </div>
            <div class="form-group">
                <label>Vehicle Make</label>
                <select name="make" class="form-control makes">
                    <option value="">Please Select</option>
                    <?php if($makes): ?>
                        <?php foreach($makes as $make => $v): ?>
                            <option value="<?= $make ?>"><?= $make ?></option>
                        <?php endforeach; ?>
                    <?php endif;?>
                </select>
            </div>


            <h2>What parts do you want to be notified for? </h2>
            <div class="components-list">
                <div class="row components-tree" id="part1">
                    <div class="col-sm-2">
                        <div class="form-group">
                            <select class="form-control years" name="parts[0][year]">
                                <option value="0">Year</option>
                                <option value="*">All</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <select class="form-control models" name="parts[0][model]">
                                <option value="0">Model</option>
                                <option value="*">All</option>
                            </select>
                        </div>
                    </div>  
                    <div class="col-sm-2">
                        <div class="form-group">
                            <select class="form-control engines" name="parts[0][engine]">
                                <option value="0">Engine</option>
                                <option value="*">All</option>
                            </select>
                        </div>
                    </div>  
                    <div class="col-sm-2">
                        <div class="form-group">
                            <select class="form-control comp-fams" name="parts[0][comp_family]">
                                <option value="0">Comp. Family</option>
                                <option value="*">All</option>
                                <?php foreach($families as $family): ?>
                                    <option value="<?= $family['comp_family'] ?>"><?= $family['comp_family'] ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>  
                    <div class="col-sm-2">
                        <div class="form-group">
                            <select class="form-control components" name="parts[0][component]">
                                <option value="0">Component</option>
                                <option value="*">All</option>
                            </select>
                        </div>
                    </div>      
                    <div class="col-sm-2">
                        <div class="form-group">
                            <button class="btn btn-success clone">+</button>
                            <button class="btn btn-danger remove">-</button>
                        </div>
                    </div>  
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-primary pull-right">Save</a>
            </div>
        </form>
    </div>
</div>

当用户选择make时，将填充年份，当用户选择年份时加载模型，当用户选择模型时加载引擎等等。我需要能够动态添加更多年/ model / engine / comp fam / comp，所以我知道我可以克隆最近的component-tree

$('.clone').click(function(e){
    e.preventDefault();
    $('.components-list').append($(this).closest('.component-tree').clone());
});

但是当用户克隆索引并保留之前的值时，我仍然不知道如何动态地将索引从name="parts[0][year]"更改为name="parts[index][year]"。

有没有办法用jquery做到这一点？