Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • create element with dynamic id on click event with jquery

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 7.99k
    Comment on it

    If you want to create multiple elements with dynamic id on click of button or an HTML element see below program for reference.

    /* The following html/jquery snippet will create multiple input boxes with dynamic id on clicking an individual element. */

    <head><script src=""></script>
    <script type="text/javascript">
        $(document).ready(function() {
            function addCounter() {     //this function set the counter variable value static.
            var cust_count = 0;
                return function() {
                    return cust_count;   //return the incremented value on click
        var countVar = addCounter();
            $("#add-more").click(function(){   // click function of element having id named "add-more"
                var j = countVar();         // get the incremented value of counter from previous counter.
                $("#add-more-field").append('<li>'  //append the html with li tags inside the div/element having id named "add-more-field"
                  +'<div class="col-sm-12">'
                    +'<label>Drop Off Address or Landmark  </label>'
                    +'<input type="text" id="anotherdropoffAddrr_'+j+'" name="anotherdropoffAddrr[]" class="form-control">'   
                           // Here "j" will increased dynamically every time user clicked on the button.
        <a id="add-more" class="add_more-stop btn-Rmore" href="javascript:void(0);">
            <span>Add Another Stop</span>
        <ul id="add-more-field"></ul>

 1 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: