How to add dynamic data attribute value to a button and a div generated by repeater.js

I am using repeater.js to repeat a div with some input fields and button, but the problem is that i want to give each and every div a unique id so that i can extract data from all the fields of that particular div input elements.

this is the HTML Code:

<div class="form-group mt-repeater">
      <a href="javascript:;" data-repeater-create class="btn btn-circle purple mt-repeater-add">
         <i class="fa fa-edit"></i> Repeat Field
      </a>
<div data-repeater-list="group-b">
<div data-repeater-item class="mt-repeater-item">
    <div class="mt-repeater-cell">
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" id="dosage_form" class="form-control typeahead-findings circle-input" placeholder="Dosage Form">
                        <label for="dosage_form">e.g. Tablet / Syrup / Capsule etc.</label>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" id="brand_name" class="form-control typeahead-findings circle-input" placeholder="Brand / Generic Name">
                        <label for="brand_name">e.g. Dytor</label>
                    </div>
                </div>
            </div>
             <div class="col-md-2">
                <div class="form-group">
                    <input class="form-control circle-input" id="contents" type="text" placeholder="Contents" />
                    <span class="help-block"> e.g Paracetamol </span>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" id="dose" class="form-control typeahead-findings circle-input" placeholder="Dose">
                        <label for="dose">e.g. 20 mg / 20 ml</label>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <input class="form-control circle-input" id="dose_regimen" type="text" placeholder="Dose Regimen" />
                    <span class="help-block"> e.g 1-1-1-1 </span>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" id="therapy_duration" class="form-control typeahead-findings circle-input" placeholder="Therapy Duration">
                        <label for="therapy_duration">e.g. 1 Day / 1 Month etc.</label>
                    </div>
                </div>
            </div>
            <div class="col-md-1 col-sm-6 col-xs-6">
                <a href="javascript:;" class="btn green-meadow mt-repeater-delete mt-repeater-del-right mt-repeater-btn-inline addData btn-circle"> <i class="fa fa-plus"></i> </a>
            </div>
            <div class="col-md-1 col-sm-6 col-xs-6">
                <a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete mt-repeater-del-right mt-repeater-btn-inline btn-circle"> <i class="fa fa-minus"></i> </a>
            </div>
        </div>
    </div>
</div>

every time i click on the add repater button this div gets replicated but what i also want is that the new div generated should have a unique div id also the curresponding elemnts inside it should have a class or id starting with that id so that data extraction can be easy for that particular div

I was using this Jquery code:

$(".addData").on('click' ,function()
        {
            alert("hi");
        });

This is the repeater i am using: https://pastebin.com/n7g7tdTH

but this code only runs for the very first div on the later generated dynamic divs it doesn't run. I also tried editing the repeater.js but no success because its all dynamic and i am not able to understand where i should edit that code to add a dynamic data-counter value for the div and the corresponding elements.

Can anyone help with this logic?

Solution

For the first problem..

but this code only runs for the very first div on the later generated dynamic divs it doesn't run

You can convert your jquery events into delegated events.. These allow you to catch events on DOM elements based on a selector, so when newer DOM elements are added these are caught too.

So -> $(".addData").on('click' ,function()

As a delegated event becomes -> $(document.body).on("click",".addData" ,function()

The second problem.

but how to get the values from the input field that are present near that button

This can be achieved by traversing up the DOM tree to a parent that surrounds the elements you want,. eg. .row or maybe mt-repeater-cell, as long as it's a DOM element that contains the elements you want to find. Here you can use jquery's closest selector, that will traverse up the tree until it finds the element your after.

So -> $(this).closest('.row').find('#dose_regimen').val()

The above will traverse up the DOM tree until it finds a .row class, we then find element with id dose_regimen etc,.. #dose_regimen and then finally get it's value with .val()