Q:

Input integer accumulating in loop

Im trying to create a loop where the loop's limit is pulled out from the input "Enter # of Circles". It is currently accumulating values based on changes in the input.
Is there any way to just pull only the last value from the input to create a loop of divs?
Thanks Alot!

<!DOCTYPE html>
    <head>
       <title>Intro Webpage!</title>
       <style>
          div {
          width: 120px;
          height: 120px;
          display: inline-block;
          margin-left: 1px;
          }
       </style>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" />
       <link rel="stylesheet" type="text/css" href="style.css"/>
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">     </script>
       <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
       <br>
       <b>Enter # of Circles<b>
       <br>
       <input type="integer" id="circles">   
       </b></b>
       <form>
          <div id="Participentfieldwrap">
             <svg height="100" width="200">
                <line x1="0" y1="50" x2="100000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" />
                <svg height="100" width="100">
                   <circle id="cir" cx="50" cy="50" r="30" stroke="black" stroke-width="3" />
                </svg>
             </svg>
             <br>
             <b>Color<b>
             <br>
             <input type="integer" id="Color">
             </b></b>
             <script>
                //Inputing integer 1, 2 or 3 which instantly applies color formatting (RGB) to circle in the same div
                var cir = document.getElementById("cir");
                var into = document.getElementById("Color");
                into.addEventListener("keyup", myFunction, false);
                
                function myFunction() {
                    if(document.getElementById("Color").value == 1)
                        cir.style.fill = "green";
                    else if(document.getElementById("Color").value == 2)
                        cir.style.fill = "red";
                    else if(document.getElementById("Color").value == 3)
                        cir.style.fill = "blue";
                    else cir.style.fill = "Yellow";
                }
             </script>
          </div>
       </form>
       <script type="text/javascript">
          //Loop for creating multiple divs in a form using a limit that is set in an integer input
          var participantsField = document.getElementById("Participentfieldwrap"),
              form = document.getElementsByTagName("form")[0],
              ContestantNum = document.getElementById("circles"),
              i, timer;
          
          function createCircles(val) {
              for(i = 0; i < val; i++) {
                  var clone = participantsField.cloneNode(true);
                  form.appendChild(clone);
              }
          }
          ContestantNum.addEventListener('keydown', function(e) {
              if(timer) {
                  clearTimeout(timer);
              }
              timer = setTimeout(function() {
                  createCircles(ContestantNum.value);
              }, 800);
          });
       </script>
    </body>
    </html>

A:

This is because you are appending to the existing circles, you are not clearing and removing the ones that exist when you create more. So it's appending more to what exist. What you need to do is remove the items (in this case being the children in form) before creating them from the input:
Edit
As @Azamantes pointed out there are duplicate id's for: #Participentfieldwrap, #Color, and #cir. I've updated the code so it assigns new id's being Participentfieldwrap_i, Color_i, and cir_i, where i goes from 0..n-1 per circle.
function createCircles(val) {
  // Removing previous circles
  while (form.firstChild) {
      form.removeChild(form.firstChild);
  }
  for(i = 0; i < val; i++) {
      var clone = participantsField.cloneNode(true);
      // Assigning new ids
      clone.id = "Participentfieldwrap_" + i;
      clone.querySelector("input").id = "Color_" + i;
      clone.querySelector("circle").id = "cir_" + i;
      form.appendChild(clone);
  }
  ...

Here is a Snippet:

<!DOCTYPE html>
    <head>
       <title>Intro Webpage!</title>
       <style>
          div {
          width: 120px;
          height: 120px;
          display: inline-block;
          margin-left: 1px;
          }
       </style>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" />
       <link rel="stylesheet" type="text/css" href="style.css"/>
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">     </script>
       <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
       <br>
       <b>Enter # of Circles<b>
       <br>
       <input type="integer" id="circles">   
       </b></b>
       <form>
          <div id="Participentfieldwrap">
             <svg height="100" width="200">
                <line x1="0" y1="50" x2="100000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" />
                <svg height="100" width="100">
                   <circle id="cir" cx="50" cy="50" r="30" stroke="black" stroke-width="3" />
                </svg>
             </svg>
             <br>
             <b>Color<b>
             <br>
             <input type="integer" id="Color">
             </b></b>
             <script>
                //Inputing integer 1, 2 or 3 which instantly applies color formatting (RGB) to circle in the same div
                var cir = document.getElementById("cir");
                var into = document.getElementById("Color");
                into.addEventListener("keyup", myFunction, false);
                
                function myFunction() {
                    if(document.getElementById("Color").value == 1)
                        cir.style.fill = "green";
                    else if(document.getElementById("Color").value == 2)
                        cir.style.fill = "red";
                    else if(document.getElementById("Color").value == 3)
                        cir.style.fill = "blue";
                    else cir.style.fill = "Yellow";
                }
             </script>
          </div>
       </form>
       <script type="text/javascript">
          //Loop for creating multiple divs in a form using a limit that is set in an integer input
          var participantsField = document.getElementById("Participentfieldwrap"),
              form = document.getElementsByTagName("form")[0],
              ContestantNum = document.getElementById("circles"),
              i, timer;
          
          function createCircles(val) {
              // Removing previous circles
              while (form.firstChild) {
                  form.removeChild(form.firstChild);
              }
              for(i = 0; i < val; i++) {
                  var clone = participantsField.cloneNode(true);
                  clone.id = "Participentfieldwrap_" + i;
                  clone.querySelector("input").id = "Color_" + i;
                  clone.querySelector("circle").id = "cir_" + i;
                  form.appendChild(clone);
              }
          }
          ContestantNum.addEventListener('keydown', function(e) {
              if(timer) {
                  clearTimeout(timer);
              }
              timer = setTimeout(function() {
                  createCircles(ContestantNum.value);
              }, 800);
          });
       </script>
    </body>
    </html>

