Jquery change name value with array style-CodePudding

First, when clicking the add-school button at the bottom. and in: school[0][variable] I want to increase the number of 0 by 1, I want to only interfere with 0 without destroying other values

$(document).ready(function() {

  $k = 0;
  $k < 10;
  
  $("#addschool").click(function() {
    $k  ;
    $(".school-copy:last").clone().appendTo(".close-add");

    $(".school-copy:last input").attr("name",
      $(".school-copy:last input").attr("name").replace("0", $k))
    $(".school-copy:last input").attr("name");

    $k  ;
  });
  
});

<div  name="school-copy">
  <div >
    <input  type="text" placeholder="Okul Adı" name="school[0][name]" value="">
  </div>
  <div >
    <input  type="text" placeholder="Şehir" name="school[0][city]" value="">
  </div>
  <div >
    <input  type="text" placeholder="Bölüm" name="school[0][faculty]" value="">
  </div>
  <div >
    <input  type="date" placeholder="Mezuniyet Tarihi" name="school[0][graduation_date]" value="" id="dp1661514196187">
  </div>
  <div >
    <div ></div>
    <div >
      <a id="addschool" ><span ><i style="padding-bottom: 6px"  aria-hidden="true"></i></span></a>
    </div>
    <div >
      <a  onclick="$(this).parent().parent().parent().remove()"><span ><i
                                         aria-hidden="true"></i></span></a>
    </div>
  </div>
</div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CodePudding user response：

Here is a more complete script

Note I use delegation as you should, and I cache the element that was cloned

Also note, if you want to renumber the fields when one school in the middle is deleted, we can do that quite simply

$(function() {
  $(".close-add").on("click", ".add-school", function() {
    const $copy = $(".school-copy").first().clone(); // take the FIRST so it has [0] in the names
    $copy.appendTo(".close-add");
    const k = $(".close-add .school-copy").length; // this is a better counter
    $("input", $copy).each(function() {
      const name = $(this).attr("name");
      $(this).attr("name", name.replace("0", k - 1)); // length is one more than we want
    });
  })
  $(".close-add").on("click", ".remove", function() {
    $(this).closest(".school-copy").remove();
    const k = $(".close-add .school-copy").length;
  })
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" />

<div >
  <div >
    <div >
      <input  type="text" placeholder="Okul Adı" name="school[0][name]" value="">
    </div>
    <div >
      <input  type="text" placeholder="Şehir" name="school[0][city]" value="">
    </div>
    <div >
      <input  type="text" placeholder="Bölüm" name="school[0][faculty]" value="">
    </div>
    <div >
      <input  type="date" placeholder="Mezuniyet Tarihi" name="school[0][graduation_date]" value="" id="dp1661514196187">
    </div>
    <div >
      <div ></div>
      <div >
        <a ><span ><i style="padding-bottom: 6px"  aria-hidden="true"></i></span></a>
      </div>
      <div >
        <a ><span ><i  aria-hidden="true"></i></span></a>
      </div>
    </div>
  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CodePudding user response：

I made your snippet work (although with bugs), just moving stuff around mainly with the $k part and the $k < 10. Also I added "font awesome" link.

$(document).ready(function() {

  $k = 0;

  $("#addschool").click(function() {
    $k  ;
    if ($k < 10) {
      $(".school-copy:last").clone().appendTo(".close-add");

      $(".school-copy:last input").each(function(index, elem) {
        elem = $(elem);
        elem.attr("name", elem.attr("name").replace($k - 1, $k))
      });

    }
  });

});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div >
</div>
<div  name="school-copy">
  <div >
    <input  type="text" placeholder="Okul Adı" name="school[0][name]" value="">
  </div>
  <div >
    <input  type="text" placeholder="Şehir" name="school[0][city]" value="">
  </div>
  <div >
    <input  type="text" placeholder="Bölüm" name="school[0][faculty]" value="">
  </div>
  <div >
    <input  type="date" placeholder="Mezuniyet Tarihi" name="school[0][graduation_date]" value="" id="dp1661514196187">
  </div>
  <div >
    <div ></div>
    <div >
      <a id="addschool" ><span ><i style="padding-bottom: 6px"  aria-hidden="true"></i></span></a>
    </div>
    <div >
      <a  onclick="$(this).parent().parent().parent().remove()"><span ><i
                                         aria-hidden="true"></i></span></a>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>