نامگذاری name ها مرتب سازی شده در آرایه ها

من یه فرم ویرایش فیلترها شبیه زیر دارم

که من اینطوری نامگذاری کردم

یکی از دوستان برنامه نویس میگه این اشتباه است و یه تصویری به من داد این است 'گفته بود باید اینطوری بزنی

اون دکمه + هم باید یه data-key بدی بهش وقتی روش کلیک میشه اون data-key رو چک کنی و ب نسبت اون اسم و ایدی و ... اینپوتت رو ست کنی و بعد اینپوت رو اضافه کنی به DOM

مثلا button data-key=0

وقتی روش کلیک شد اونتشو تو js باید listen کنی و دیتا رو بگیری یه اینپوت ایجاد کنی ک اسمش filter[0][value][] باشه حالا اگه دیتا ۱۰ بود باید تو ساخت اینپوت هم ۱۰ بزاری اینطوری داینامیک میشه

ببینید کد شما یک مقدار بهم ریخته هست و ظاهرا از template engine استفاده شده (فکر میکنم blade هست) و خیلی نمیتونم کد شما رو دستکاری بکنم. ولی طبق سوالتون، مدلی که من همچین مواقع پیاده سازی میکنم به این شکل هست:

بخش HTML

<div class="container">

  <div class="section">
    <input type="text" data-key="1" placeholder="name" />
    <input type="text" data-key="1" placeholder="brand" />
  </div>

  <br />
  <button id="add">Add +</button>
  <hr />
  <button id="submit">Submit</button>
</div>

بخش JavaScript (jQuery)

// To add a new section
$("#add").on("click", function(){
    var section = $(".section:last").clone();
    section.find("input").each(function(){
        var data_key = $(this).attr('data-key');
       $(this).attr('data-key', Number(data_key) + 1);
    })
  section.insertAfter(".section:last");
})

$("#submit").on("click", function(){
    $(document).find("input").each(function(){
        var t = $(this);
        console.log(t.attr("placeholder") + "-" + t.attr("data-key") + " : " + t.val());
  })
})

اینم یک مثال اجرایی از نمونه کد بالا

لطفا بررسی کنید اگر سوالی داشتید بپرسید. امیدوارم که به دردتون بخوره. این نکته هم بگم که برای اینپوت ها میتونید اتریبیوت name رو هم ست کنید که اگه خواستید با مدل .serialize() دیتا رو سمت سرور بفرستید روند به درستی پیش بره.