cakePHP(v3.x)の フォームにrepeater.jsを導入する。

フォーム中に下の図のように、新規に要素を追加していきたいような画面を作りたいときは、 プレビュー

まず以下のCDNをロードし、

<!-- repeater用 -->
<?=$this->Html->script("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js");?>
<?=$this->Html->script("https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js");?>

Template/Shoppings/add.ctpに

<div class="repeater">
    <div data-repeater-list="group-a">
        <div data-repeater-item>
            <?=$this->Form->control('name',['placeholder' => __("購入する商品を入力"), 'label'=> '買い物リスト']);
        </div>
                <button data-repeater-delete type="button"></button>
    </div>
    <input data-repeater-create type="button" value="品目を追加"/>
</div>
<script>
    $(document).ready(function(){
        $('.repeater').repeater({
            initEmpty: false,
            isFirstItemUndeletable: false
        });
    });
</script>

このような感じにしてやって、あとはcssをうまく調整してやるといいです。