how to append different id into div and add text into input value when trigger click event

What I want to achieve: when clicking the add new step button the id “step1” will be added into HTML div and the value will also display step1 and if I click a second time it will increment so the id “step2” will be added into the second appended div and the value also will display step2

what I did / problem: When I click the button for 2 times it appends id “step2” into all two div if I click four times it will append id “step4” to all appended div. This is what i did (I uses bootstrap so some element is not display properly but i have deleted unimportant part): https://jsfiddle.net/noobnoob121212/306boevh/7/

code:

$(document).ready(function() {
    $(".appendstep").click(function() {
        var counter = $(".counter");
        var value = $(".counter").val();
        counter.val(++value);
        

        var totalchild = $(".steplist").children().length;

      

        $(".steplist").append(
                '<div class="input-group mb-3">' +
                '<div class="input-group-prepend">' +
                '<button class="btn btn-dark" type="button"><i class="bi bi-arrow-down"></i></button>' +
                '<button class="btn btn-dark" type="button"><i class="bi bi-arrow-up"></i></button>' +
                '</div>' +
                '<input type="text" class="form-control"  placeholder="" aria-label="" aria-describedby="basic-addon1">' +
                ' <div class="input-group-append">' +
                '<button class="btn btn-dark" type="button"><i class="bi bi-trash"></i></button>' +
                '<button class="btn btn-dark" type="button"><i class="bi bi-pencil-square"></i></button>' +
                '<button class="btn btn-warning" type="button" data-toggle="modal" data-target="#actionmodal"><i class="bi bi-plus-circle-fill"></i>Action</button>' +
                ' </div>' +
                '</div>'
            )
             $(".steplist").children().attr("id", "step" + value)
                
       


    });
});

Answer

It’s because you are manipulating global .steplist instead of only the new elements. Also, your approach will produce a non-valid HTML, because id should be unique for each element, this approach will make all elements with the same id.

So I’d suggest add id only to the root element of new added content like so:

$(document).ready(function() {
  $(".appendstep").click(function() {
    var $counter = $(".counter");
    var value = $counter.val();
    $counter.val(++value);

    const $steplist = $(".steplist"),
          totalchild = $steplist.children().length,
          $newData = $(
      '<div class="input-group mb-3">' +
      '<div class="input-group-prepend">' +
      '<button class="btn btn-dark" type="button"><i class="bi bi-arrow-down"></i></button>' +
      '<button class="btn btn-dark" type="button"><i class="bi bi-arrow-up"></i></button>' +
      '</div>' +
      '<input type="text" class="form-control"  placeholder="" aria-label="" aria-describedby="basic-addon1">' +
      ' <div class="input-group-append">' +
      '<button class="btn btn-dark" type="button"><i class="bi bi-trash"></i></button>' +
      '<button class="btn btn-dark" type="button"><i class="bi bi-pencil-square"></i></button>' +
      '<button class="btn btn-warning" type="button" data-toggle="modal" data-target="#actionmodal"><i class="bi bi-plus-circle-fill"></i>Action</button>' +
      ' </div>' +
      '</div>'
    )
    $newData.attr("id", "step" + value)
    $newData.addClass("step" + value);
    $newData.find("input").val("Step " + value);
    $steplist.append($newData);

});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="appendstep">Add new step</button>
<div class="counter"></div>
<div class="steplist"></div>

With this you’ll be able access individual elements via something like $("#step1 input")

P.S. as you may have noticed, I’ve added $ to some of the variables – it’s just a encouraged suggestion to identify that a variable contains jquery element – this might save some headache of troubleshooting.