javascriptを使用して追加されているものを動的に更新する方法

Question

リストにボックスを追加しようとしています。このボックスには見出しがありますが、各見出しを1ずつ増やす方法がわかりません。

現在、ボタンをクリックすると、このコードによってボックスが生成されます。

function createBoxYes(i) { 
    var box = '<div class="panel-heading">Question 1</div>'; 
    $("#yesColumn").append(box); 
} 

ただし、入力に基づいて質問番号を増やそうとしています（i）。それはi + 1と等しくなければなりません。私の最初の考えはdivにIDを入れることでしたが、findElementById("question")を使用した場合、すべてのボックスが選択され、各ボックスは変更されずにそのまま残しておきたいのです。

ありがとうございました！

Answer 1

これはあなたを助けるかもしれません。

function createBoxYes(i) { 
    var box = '<div class="panel-heading">Question' + (i + 1) +'</div>'; 
    $("#yesColumn").append(box); 
} 

ちょうどそこにi + 1を入れてください。

Answer 2

私は、このLLがあなたの役に立てば幸い：

var questions = 1; 
 
function createBoxYes() { 
 
    var box = '<div class="panel-heading">Question ' + ++questions + '</div>'; 
 
    $("#yesColumn").append(box); 
 
} 
 
$('#addBox').bind('click', createBoxYes);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="yesColumn" class="panel panel-default"> 
 
    <div class="panel-heading">Question 1</div> 
 
</div> 
 

 
<button id="addBox" class="btn btn-info">Add</button>