jQuery: How to add div with a dynamic id that increments when button is clicked?












0














I have this problem in jQuery:



I have a button that when clicked calls a function to create a div with an incremental id, equal to the number of clicks made. Here's my simplified solution:



$(document).ready(function() {

  var count = 0;

});



$("#button").click(function() {

  count = count + 1;

  addDiv(count);

});


But, if I define the function click here, the id on my div is NaN while if I put the function of click in document.ready(), it creates two divs. I only want to create a div with incremental Id for each click!






javascript jquery html







share|improve this question
























  • Have a look at what var does and how variables defined with var work: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – Andreas
    Nov 22 at 18:45












  • I think the problem is that you have to change the elements attribute and not just a javascript variable
    – tobifasc
    Nov 22 at 18:53










  • The problem is in variable scope check jsfiddle.net/f9ug1dyv
    – Mohammad
    Nov 22 at 18:57
















0














I have this problem in jQuery:



I have a button that when clicked calls a function to create a div with an incremental id, equal to the number of clicks made. Here's my simplified solution:



$(document).ready(function() {

  var count = 0;

});



$("#button").click(function() {

  count = count + 1;

  addDiv(count);

});


But, if I define the function click here, the id on my div is NaN while if I put the function of click in document.ready(), it creates two divs. I only want to create a div with incremental Id for each click!






javascript jquery html







share|improve this question
























  • Have a look at what var does and how variables defined with var work: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – Andreas
    Nov 22 at 18:45












  • I think the problem is that you have to change the elements attribute and not just a javascript variable
    – tobifasc
    Nov 22 at 18:53










  • The problem is in variable scope check jsfiddle.net/f9ug1dyv
    – Mohammad
    Nov 22 at 18:57














0












0








0







I have this problem in jQuery:



I have a button that when clicked calls a function to create a div with an incremental id, equal to the number of clicks made. Here's my simplified solution:



$(document).ready(function() {

  var count = 0;

});



$("#button").click(function() {

  count = count + 1;

  addDiv(count);

});


But, if I define the function click here, the id on my div is NaN while if I put the function of click in document.ready(), it creates two divs. I only want to create a div with incremental Id for each click!






javascript jquery html







share|improve this question















I have this problem in jQuery:



I have a button that when clicked calls a function to create a div with an incremental id, equal to the number of clicks made. Here's my simplified solution:



$(document).ready(function() {

  var count = 0;

});



$("#button").click(function() {

  count = count + 1;

  addDiv(count);

});


But, if I define the function click here, the id on my div is NaN while if I put the function of click in document.ready(), it creates two divs. I only want to create a div with incremental Id for each click!






javascript jquery html




javascript jquery html






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 22 at 19:42









Roy Scheffers

2,15291725




2,15291725










asked Nov 22 at 18:42









user10276822

43




43












  • Have a look at what var does and how variables defined with var work: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – Andreas
    Nov 22 at 18:45












  • I think the problem is that you have to change the elements attribute and not just a javascript variable
    – tobifasc
    Nov 22 at 18:53










  • The problem is in variable scope check jsfiddle.net/f9ug1dyv
    – Mohammad
    Nov 22 at 18:57


















  • Have a look at what var does and how variables defined with var work: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – Andreas
    Nov 22 at 18:45












  • I think the problem is that you have to change the elements attribute and not just a javascript variable
    – tobifasc
    Nov 22 at 18:53










  • The problem is in variable scope check jsfiddle.net/f9ug1dyv
    – Mohammad
    Nov 22 at 18:57
















Have a look at what var does and how variables defined with var work: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– Andreas
Nov 22 at 18:45






Have a look at what var does and how variables defined with var work: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– Andreas
Nov 22 at 18:45














I think the problem is that you have to change the elements attribute and not just a javascript variable
– tobifasc
Nov 22 at 18:53




I think the problem is that you have to change the elements attribute and not just a javascript variable
– tobifasc
Nov 22 at 18:53












The problem is in variable scope check jsfiddle.net/f9ug1dyv
– Mohammad
Nov 22 at 18:57




The problem is in variable scope check jsfiddle.net/f9ug1dyv
– Mohammad
Nov 22 at 18:57












5 Answers
5






active

oldest

votes


















1














try this






var count=0;

$(document).ready(function(){

  $("#add-div").click(function(){

    count++;

    $("body").append('<div id="'+count+'">div number '+count+'</div>');

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

<button id="add-div">add div</button>

<br>

<br>

</body>








share|improve this answer





















  • Please, Don't just "Try this". Explain in a couple of paragraph why this works.
    – Roko C. Buljan
    Nov 22 at 19:02










  • thanks, but this is a simple code, he will know the error
    – abdulsattar-alkhalaf
    Nov 22 at 19:04



















1














This was due to scope issue.
Try this code:



  $( document ).ready(function() {

      var count =0;

      console.log(count);

   $( "#button" ).click(function() {

       count=count+1;

       addDiv(count);

    });

    });





share|improve this answer





















  • You can remove console.log statement I used this for debugging purpose.
    – Jahanzeb Awan
    Nov 22 at 19:11



















0














This is because of the scoping issue of count variable. Please note that JavaScript variables are accessible in scoping scenarios (block level scoping or function level scoping). More info here
What's wrong with your code is you have declared the count variable in one function and you are accessing it outside of it which is not allowed. Only to fix your code, I have made the count variable as global and now it will work as expected.



Note: Please note that global variables can be accessed anywhere in the execution context, so can be used with utmost care.






  $( document ).ready(function() 

  {

     //var count =0;

  });



var count=0;

$('#button').on('click', function(){ 

count = count + 1;

alert(count);

});





//$( "#button" ).click(function() {

//     count=count+1;

//     addDiv(count);

//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<button id='button'>Click Me</button>








share|improve this answer





























    0














    if you define a variable within a function, it is restricted only to this function, if you set it to a global scope, which is what you need in this case, the variable becomes available for all functions that are under this scope, look:






    //global scope
    
var count = 0;
    
  $( "#button" ).click(function() {
    
    //function restrict scope
    
    $('#increment').append(`<div>${count}</div>`)
    
    count++;
    
   });

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <body>
    
    <button id="button">Click Me!</button>
    
    <div id="increment">
    
    </body>





    See more at this page






    share|improve this answer





























      0














      It's a scope problem.
      If you don't want to expose variables to the outer scope, you can use a closure.



      let addDiv = function(){
      
    let counter = 0;
      
    return function(){
      
        counter++;
      
        let wrapper = $("#someDiv");
      
        wrapper.append(`<div> id: ${counter}</div>`)
      
    }
      
}();
      
button.on("click", function(){
      
  addDiv();
      
});





      share|improve this answer





















        Your Answer






        StackExchange.ifUsing("editor", function () {
        StackExchange.using("externalEditor", function () {
        StackExchange.using("snippets", function () {
        StackExchange.snippets.init();
        });
        });
        }, "code-snippets");

        StackExchange.ready(function() {
        var channelOptions = {
        tags: "".split(" "),
        id: "1"
        };
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function() {
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled) {
        StackExchange.using("snippets", function() {
        createEditor();
        });
        }
        else {
        createEditor();
        }
        });

        function createEditor() {
        StackExchange.prepareEditor({
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader: {
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        },
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        });


        }
        });














        draft saved

        draft discarded


















        StackExchange.ready(
        function () {
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53436628%2fjquery-how-to-add-div-with-a-dynamic-id-that-increments-when-button-is-clicked%23new-answer', 'question_page');
        }
        );

        Post as a guest















        Required, but never shown

























        5 Answers
        5






        active

        oldest

        votes








        5 Answers
        5






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        1














        try this






        var count=0;
        
$(document).ready(function(){
        
  $("#add-div").click(function(){
        
    count++;
        
    $("body").append('<div id="'+count+'">div number '+count+'</div>');
        
  });
        
});

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
<body>
        
<button id="add-div">add div</button>
        
<br>
        
<br>
        
</body>








        share|improve this answer





















        • Please, Don't just "Try this". Explain in a couple of paragraph why this works.
          – Roko C. Buljan
          Nov 22 at 19:02










        • thanks, but this is a simple code, he will know the error
          – abdulsattar-alkhalaf
          Nov 22 at 19:04
















        1














        try this






        var count=0;
        
$(document).ready(function(){
        
  $("#add-div").click(function(){
        
    count++;
        
    $("body").append('<div id="'+count+'">div number '+count+'</div>');
        
  });
        
});

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
<body>
        
<button id="add-div">add div</button>
        
<br>
        
<br>
        
</body>








        share|improve this answer





















        • Please, Don't just "Try this". Explain in a couple of paragraph why this works.
          – Roko C. Buljan
          Nov 22 at 19:02










        • thanks, but this is a simple code, he will know the error
          – abdulsattar-alkhalaf
          Nov 22 at 19:04














        1












        1








        1






        try this






        var count=0;
        
$(document).ready(function(){
        
  $("#add-div").click(function(){
        
    count++;
        
    $("body").append('<div id="'+count+'">div number '+count+'</div>');
        
  });
        
});

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
<body>
        
<button id="add-div">add div</button>
        
<br>
        
<br>
        
</body>








        share|improve this answer












        try this






        var count=0;
        
$(document).ready(function(){
        
  $("#add-div").click(function(){
        
    count++;
        
    $("body").append('<div id="'+count+'">div number '+count+'</div>');
        
  });
        
});

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
<body>
        
<button id="add-div">add div</button>
        
<br>
        
<br>
        
</body>








        var count=0;
        
$(document).ready(function(){
        
  $("#add-div").click(function(){
        
    count++;
        
    $("body").append('<div id="'+count+'">div number '+count+'</div>');
        
  });
        
});

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
<body>
        
<button id="add-div">add div</button>
        
<br>
        
<br>
        
</body>





        var count=0;
        
$(document).ready(function(){
        
  $("#add-div").click(function(){
        
    count++;
        
    $("body").append('<div id="'+count+'">div number '+count+'</div>');
        
  });
        
});

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
<body>
        
<button id="add-div">add div</button>
        
<br>
        
<br>
        
</body>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 22 at 18:57









        abdulsattar-alkhalaf

        31715




        31715












        • Please, Don't just "Try this". Explain in a couple of paragraph why this works.
          – Roko C. Buljan
          Nov 22 at 19:02










        • thanks, but this is a simple code, he will know the error
          – abdulsattar-alkhalaf
          Nov 22 at 19:04


















        • Please, Don't just "Try this". Explain in a couple of paragraph why this works.
          – Roko C. Buljan
          Nov 22 at 19:02










        • thanks, but this is a simple code, he will know the error
          – abdulsattar-alkhalaf
          Nov 22 at 19:04
















        Please, Don't just "Try this". Explain in a couple of paragraph why this works.
        – Roko C. Buljan
        Nov 22 at 19:02




        Please, Don't just "Try this". Explain in a couple of paragraph why this works.
        – Roko C. Buljan
        Nov 22 at 19:02












        thanks, but this is a simple code, he will know the error
        – abdulsattar-alkhalaf
        Nov 22 at 19:04




        thanks, but this is a simple code, he will know the error
        – abdulsattar-alkhalaf
        Nov 22 at 19:04













        1














        This was due to scope issue.
        Try this code:



          $( document ).ready(function() {
        
      var count =0;
        
      console.log(count);
        
   $( "#button" ).click(function() {
        
       count=count+1;
        
       addDiv(count);
        
    });
        
    });





        share|improve this answer





















        • You can remove console.log statement I used this for debugging purpose.
          – Jahanzeb Awan
          Nov 22 at 19:11
















        1














        This was due to scope issue.
        Try this code:



          $( document ).ready(function() {
        
      var count =0;
        
      console.log(count);
        
   $( "#button" ).click(function() {
        
       count=count+1;
        
       addDiv(count);
        
    });
        
    });





        share|improve this answer





















        • You can remove console.log statement I used this for debugging purpose.
          – Jahanzeb Awan
          Nov 22 at 19:11














        1












        1








        1






        This was due to scope issue.
        Try this code:



          $( document ).ready(function() {
        
      var count =0;
        
      console.log(count);
        
   $( "#button" ).click(function() {
        
       count=count+1;
        
       addDiv(count);
        
    });
        
    });





        share|improve this answer












        This was due to scope issue.
        Try this code:



          $( document ).ready(function() {
        
      var count =0;
        
      console.log(count);
        
   $( "#button" ).click(function() {
        
       count=count+1;
        
       addDiv(count);
        
    });
        
    });






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 22 at 19:09









        Jahanzeb Awan

        569




        569












        • You can remove console.log statement I used this for debugging purpose.
          – Jahanzeb Awan
          Nov 22 at 19:11


















        • You can remove console.log statement I used this for debugging purpose.
          – Jahanzeb Awan
          Nov 22 at 19:11
















        You can remove console.log statement I used this for debugging purpose.
        – Jahanzeb Awan
        Nov 22 at 19:11




        You can remove console.log statement I used this for debugging purpose.
        – Jahanzeb Awan
        Nov 22 at 19:11











        0














        This is because of the scoping issue of count variable. Please note that JavaScript variables are accessible in scoping scenarios (block level scoping or function level scoping). More info here
        What's wrong with your code is you have declared the count variable in one function and you are accessing it outside of it which is not allowed. Only to fix your code, I have made the count variable as global and now it will work as expected.



        Note: Please note that global variables can be accessed anywhere in the execution context, so can be used with utmost care.






          $( document ).ready(function() 
        
  {
        
     //var count =0;
        
  });
        

        
var count=0;
        
$('#button').on('click', function(){ 
        
count = count + 1;
        
alert(count);
        
});
        

        

        
//$( "#button" ).click(function() {
        
//     count=count+1;
        
//     addDiv(count);
        
//});

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        

        
<button id='button'>Click Me</button>








        share|improve this answer


























          0














          This is because of the scoping issue of count variable. Please note that JavaScript variables are accessible in scoping scenarios (block level scoping or function level scoping). More info here
          What's wrong with your code is you have declared the count variable in one function and you are accessing it outside of it which is not allowed. Only to fix your code, I have made the count variable as global and now it will work as expected.



          Note: Please note that global variables can be accessed anywhere in the execution context, so can be used with utmost care.






            $( document ).ready(function() 
          
  {
          
     //var count =0;
          
  });
          

          
var count=0;
          
$('#button').on('click', function(){ 
          
count = count + 1;
          
alert(count);
          
});
          

          

          
//$( "#button" ).click(function() {
          
//     count=count+1;
          
//     addDiv(count);
          
//});

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          

          
<button id='button'>Click Me</button>








          share|improve this answer
























            0












            0








            0






            This is because of the scoping issue of count variable. Please note that JavaScript variables are accessible in scoping scenarios (block level scoping or function level scoping). More info here
            What's wrong with your code is you have declared the count variable in one function and you are accessing it outside of it which is not allowed. Only to fix your code, I have made the count variable as global and now it will work as expected.



            Note: Please note that global variables can be accessed anywhere in the execution context, so can be used with utmost care.






              $( document ).ready(function() 
            
  {
            
     //var count =0;
            
  });
            

            
var count=0;
            
$('#button').on('click', function(){ 
            
count = count + 1;
            
alert(count);
            
});
            

            

            
//$( "#button" ).click(function() {
            
//     count=count+1;
            
//     addDiv(count);
            
//});

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            

            
<button id='button'>Click Me</button>








            share|improve this answer












            This is because of the scoping issue of count variable. Please note that JavaScript variables are accessible in scoping scenarios (block level scoping or function level scoping). More info here
            What's wrong with your code is you have declared the count variable in one function and you are accessing it outside of it which is not allowed. Only to fix your code, I have made the count variable as global and now it will work as expected.



            Note: Please note that global variables can be accessed anywhere in the execution context, so can be used with utmost care.






              $( document ).ready(function() 
            
  {
            
     //var count =0;
            
  });
            

            
var count=0;
            
$('#button').on('click', function(){ 
            
count = count + 1;
            
alert(count);
            
});
            

            

            
//$( "#button" ).click(function() {
            
//     count=count+1;
            
//     addDiv(count);
            
//});

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            

            
<button id='button'>Click Me</button>








              $( document ).ready(function() 
            
  {
            
     //var count =0;
            
  });
            

            
var count=0;
            
$('#button').on('click', function(){ 
            
count = count + 1;
            
alert(count);
            
});
            

            

            
//$( "#button" ).click(function() {
            
//     count=count+1;
            
//     addDiv(count);
            
//});

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            

            
<button id='button'>Click Me</button>





              $( document ).ready(function() 
            
  {
            
     //var count =0;
            
  });
            

            
var count=0;
            
$('#button').on('click', function(){ 
            
count = count + 1;
            
alert(count);
            
});
            

            

            
//$( "#button" ).click(function() {
            
//     count=count+1;
            
//     addDiv(count);
            
//});

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            

            
<button id='button'>Click Me</button>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 22 at 19:00









            Sahil Sharma

            795619




            795619























                0














                if you define a variable within a function, it is restricted only to this function, if you set it to a global scope, which is what you need in this case, the variable becomes available for all functions that are under this scope, look:






                //global scope
                
var count = 0;
                
  $( "#button" ).click(function() {
                
    //function restrict scope
                
    $('#increment').append(`<div>${count}</div>`)
                
    count++;
                
   });

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                
    <body>
                
    <button id="button">Click Me!</button>
                
    <div id="increment">
                
    </body>





                See more at this page






                share|improve this answer


























                  0














                  if you define a variable within a function, it is restricted only to this function, if you set it to a global scope, which is what you need in this case, the variable becomes available for all functions that are under this scope, look:






                  //global scope
                  
var count = 0;
                  
  $( "#button" ).click(function() {
                  
    //function restrict scope
                  
    $('#increment').append(`<div>${count}</div>`)
                  
    count++;
                  
   });

                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                  
    <body>
                  
    <button id="button">Click Me!</button>
                  
    <div id="increment">
                  
    </body>





                  See more at this page






                  share|improve this answer
























                    0












                    0








                    0






                    if you define a variable within a function, it is restricted only to this function, if you set it to a global scope, which is what you need in this case, the variable becomes available for all functions that are under this scope, look:






                    //global scope
                    
var count = 0;
                    
  $( "#button" ).click(function() {
                    
    //function restrict scope
                    
    $('#increment').append(`<div>${count}</div>`)
                    
    count++;
                    
   });

                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    
    <body>
                    
    <button id="button">Click Me!</button>
                    
    <div id="increment">
                    
    </body>





                    See more at this page






                    share|improve this answer












                    if you define a variable within a function, it is restricted only to this function, if you set it to a global scope, which is what you need in this case, the variable becomes available for all functions that are under this scope, look:






                    //global scope
                    
var count = 0;
                    
  $( "#button" ).click(function() {
                    
    //function restrict scope
                    
    $('#increment').append(`<div>${count}</div>`)
                    
    count++;
                    
   });

                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    
    <body>
                    
    <button id="button">Click Me!</button>
                    
    <div id="increment">
                    
    </body>





                    See more at this page






                    //global scope
                    
var count = 0;
                    
  $( "#button" ).click(function() {
                    
    //function restrict scope
                    
    $('#increment').append(`<div>${count}</div>`)
                    
    count++;
                    
   });

                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    
    <body>
                    
    <button id="button">Click Me!</button>
                    
    <div id="increment">
                    
    </body>





                    //global scope
                    
var count = 0;
                    
  $( "#button" ).click(function() {
                    
    //function restrict scope
                    
    $('#increment').append(`<div>${count}</div>`)
                    
    count++;
                    
   });

                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    
    <body>
                    
    <button id="button">Click Me!</button>
                    
    <div id="increment">
                    
    </body>






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 22 at 19:05









                    Demian

                    1637




                    1637























                        0














                        It's a scope problem.
                        If you don't want to expose variables to the outer scope, you can use a closure.



                        let addDiv = function(){
                        
    let counter = 0;
                        
    return function(){
                        
        counter++;
                        
        let wrapper = $("#someDiv");
                        
        wrapper.append(`<div> id: ${counter}</div>`)
                        
    }
                        
}();
                        
button.on("click", function(){
                        
  addDiv();
                        
});





                        share|improve this answer


























                          0














                          It's a scope problem.
                          If you don't want to expose variables to the outer scope, you can use a closure.



                          let addDiv = function(){
                          
    let counter = 0;
                          
    return function(){
                          
        counter++;
                          
        let wrapper = $("#someDiv");
                          
        wrapper.append(`<div> id: ${counter}</div>`)
                          
    }
                          
}();
                          
button.on("click", function(){
                          
  addDiv();
                          
});





                          share|improve this answer
























                            0












                            0








                            0






                            It's a scope problem.
                            If you don't want to expose variables to the outer scope, you can use a closure.



                            let addDiv = function(){
                            
    let counter = 0;
                            
    return function(){
                            
        counter++;
                            
        let wrapper = $("#someDiv");
                            
        wrapper.append(`<div> id: ${counter}</div>`)
                            
    }
                            
}();
                            
button.on("click", function(){
                            
  addDiv();
                            
});





                            share|improve this answer












                            It's a scope problem.
                            If you don't want to expose variables to the outer scope, you can use a closure.



                            let addDiv = function(){
                            
    let counter = 0;
                            
    return function(){
                            
        counter++;
                            
        let wrapper = $("#someDiv");
                            
        wrapper.append(`<div> id: ${counter}</div>`)
                            
    }
                            
}();
                            
button.on("click", function(){
                            
  addDiv();
                            
});






                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Nov 22 at 19:22









                            Dmitry Shevchenko

                            1




                            1






























                                draft saved

                                draft discarded




















































                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid …



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.





                                Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                                Please pay close attention to the following guidance:


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid …



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function () {
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53436628%2fjquery-how-to-add-div-with-a-dynamic-id-that-increments-when-button-is-clicked%23new-answer', 'question_page');
                                }
                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                -

                                Popular posts from this blog

                                What visual should I use to simply compare current year value vs last year in Power BI desktop

                                Image
                                0 I have column SubToBind that shows current year ratio and column PY SubToBind which shows previous year ratio. How can I simply create a card that would be displaying them both in a nice way? Something like that: I cannot achieve that with regular card, I also tried Card with States by OKViz but also unable to see both values. In KPI visual - I dont like the word "Goal", it will confuse end users. Are there any cards or other visuals that would do the job? Thanks powerbi dax powerbi-embedded share | improve this question edited Jun 11 '18 at 20:11 Oleg ...
                                Read more

                                How to ignore python UserWarning in pytest?

                                Image
                                up vote 1 down vote favorite I am using openpyxl for parsing .xlsm files, and pytest for testing. When I open a file, I get the: OpenPyxl -> UserWarning: Data Validation extension is not supported and will be removed That is not really a problem bcs. program works and I can't change the .xlsm file to fix that. But... When I run pytest with something like: def test_wrong_file_format(): assert check_excel(open_excel('file.xlsm')) == True I will get the warning i mentioned altought check_excel(open_excel('file.xlsm')) returns True and the test should suceed... Is there a nice way to tell the pytest that "It's not a bug it's a feature" and tests should pass even when they get this warning? Is there other way than using something like: with pytest.warns(UserWarning): ...
                                Read more

                                Alexandru Averescu

                                Image
                                Alexandre Averescu Alexandru Averescu Naissance 3 avril 1859 Babele, Ismail  (ro) près de Izmaïl (principauté de Moldavie) Décès 2 octobre 1938 (à 79 ans) [ 1 ] Bucarest Origine   Roumanie Arme cavalerie Grade Maréchal Années de service 1901-1917 Commandement chef d'état-major général 2 e  armée 3 e  armée Groupe d'armée sud armée du Danube Conflits Guerre russo-turque de 1877-1878 Deuxième guerre balkanique Première Guerre mondiale Faits d'armes Bataille de Turtucaia/Tutrakan Bataille de Mărăști Distinctions Autres fonctions 3 fois président du Conseil des ministres ministre des Affaires étrangères ministre sans portefeuille conseiller de la Couronne modifier   Alexandre Averescu (en roumain : Alexandru Averescu .mw-parser-output .prononciation>a{background:url("//upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/11px-Loudspeaker.svg.png")center ...
                                Read more