I make a form generator. And the question arose. I have a button that adds input. This input has a button with settings. When I click on it, everything is fine, but when I add another input, when I click on the button, the settings are opened, not the 2nd input, but the 1st one. Why? Help me please.
function addInput() { var code = document.querySelector('.code'); var block = document.getElementById('add-form'); var posInput = document.getElementById('pos-input'); var input = document.createElement('input'); var titleInput = document.createElement('span'); var edit = document.createElement('button'); var div = document.createElement('div'); var changeInput = document.createElement('input'); var label = document.createElement('label'); var changeTitle = document.createElement('button'); var avrBlock = document.createElement('div'); var editBlock = document.createElement('div'); input.id = "input"; input.type = "text"; titleInput.className = "title-input"; titleInput.innerHTML = "Имя"; edit.className = "edit"; div.className = "block-btn"; changeInput.id = "change-input"; changeInput.type = "text"; label.innerHTML = "Заголовок поля:"; changeTitle.id = "change-title"; changeTitle.innerHTML = "Поменять заголовок"; avrBlock.className = "avrage-block"; editBlock.className = "edit-block"; changeTitle.onclick = function() { var changeInput = document.getElementById('change-input').value; var codeResult = document.getElementById('input-title-name'); var titleInput = document.querySelector('.title-input'); codeResult.innerHTML = changeInput; titleInput.innerHTML = changeInput; } avrBlock.appendChild(titleInput); avrBlock.appendChild(div); avrBlock.appendChild(input); avrBlock.appendChild(edit); avrBlock.appendChild(label); avrBlock.appendChild(changeInput); avrBlock.appendChild(changeTitle); avrBlock.appendChild(editBlock); div.appendChild(input); div.appendChild(edit); editBlock.appendChild(label); editBlock.appendChild(changeInput); editBlock.appendChild(changeTitle); posInput.appendChild(avrBlock); block.appendChild(posInput); edit.onclick = function() { var dropDown = document.querySelector(".edit-block"); if (dropDown.currentStyle) { var displayStyle = dropDown.currentStyle.display; } else if (window.getComputedStyle) { var displayStyle = window.getComputedStyle(dropDown, null).getPropertyValue("display"); } if (displayStyle == "none") { dropDown.style.display = "block"; } else { dropDown.style.display = "none"; } } code.innerHTML += " <span class='title-input'>" + "<span id='input-title-name'>Имя</span>" + "</span><input id='input' type='text'>" + '<br>'; } function increaseHeight() { var block = document.getElementById('add-form'); block.style.height = "auto"; } @import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz'); * { margin: 0; padding: 0 } #container { float: left; width: 40%; } #wrap { background-color: #c9c9c9; height: 100vh; } #add-button-container { display: inline-grid; margin-top: 2%; } #add-form { background-color: #4C4C4C; width: 50%; height: 300px; border-radius: 4px; } #add-form-container { display: flow-root; } #add-form-block { display: flex; justify-content: center; margin-top: 5%; } #input { display: block; font-size: 1.2em; padding: 0.25em; width: 88%; margin-bottom: 0.6em; border-radius: 3px; border: 1px solid #BABABA; } label { color: white; display: inline-block; margin-right: 2%; font-family: 'PT Sans Narrow', sans-serif; font-size: 1.15em; } #pos-input { margin: 5% 0 0 5%; } #input-textarea { margin-bottom: 1em; display: block; } #input-submit { cursor: pointer; } .title-input { font-size: 1.2em; color: white; font-family: 'Yanone Kaffeesatz', sans-serif; text-align: left; } #result { display: flex; justify-content: center; } .block-btn { display: ruby; } .edit::after { content:"\f14b"; font-family: "FontAwesome"; font-size: 2em; color: white; } .edit { background: none; margin-left: 2%; border: none; cursor: pointer; } #change-input { margin-right: 2%; padding: 0.25em; margin-bottom: 0.6em; border-radius: 3px; border: 1px solid #BABABA; width: 30%; } #change-title { font-family:Arial, Helvetica, sans-serif; font-size: 16px; border-radius:4px; padding-left:5px; padding-right:5px; padding-top:3px; padding-bottom:3px; color:#ffffff; background-color:#cc6666; outline:none; border:none; cursor:pointer; display:inline-block; } #change-title:hover { color:#ffffff; background-color:#d41e1e; } .edit-block { display: none; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Генераторы CSS | Rapprogtrain</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8"/> <meta name="description" content="rapprogtrain-это сайт по изучению программирования"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/> <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet"> <script src="app.js"></script> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <section> <div id="container"> <div id="wrap"> <div class="title"> <span>Добавить поле</span> </div> <div id="add-button-container"> <button id="add-input" onclick=" addInput(); increaseHeight();">Добавить input</button> </div> <div class="codes-wrapper"> <div id="title-res-block2"> <h3 class="third">CSS Код</h3> <button class="clipboard" data-clipboard-target="#codes">Копировать код</button></div> <div class="codes" id="codes"> <p class="line1"><div id='add-form'></p> <p class="line2"><div id='pos-input'></p> <p class="code"></p> </div> </div> </div> </div> <div id="add-form-container"> <div id="add-form-block"> <div id="add-form"> <div id="pos-input"> </div> </div> </div> </div> </section> </body> </html> 