使用Handlebars.js生成相同的ID按钮＆＃34;每个＆＃34;调用

Question

使用把手循环一系列物体＆＃34;每个＆＃34;阻止创建具有id的按钮元素，我期望一个jQuery函数调用该id以应用于具有id的所有按钮，显然我错了，因为只有第一个按钮响应。无法解决为什么1响应，而其他人不会，需要任何帮助，提前感谢。

＆＃13;

＆＃13;

//  Objects Data
var size = {
  stretch : [
					{	
						inches : "20 inches",
						value: 50
					},
					{	
						inches : "26 inches",
						value: 40
					},
					{	
						inches : "30 inches",
						value: 30
					}
					]};

// Function to display compiled template -->
  function showTemplate(template, data){
    var html    = template(data);
    $('#content').html(html);
  }

// Compiling template
var button_template;

var source   = $("#button-template").html();
button_template = Handlebars.compile(source);

// Displaying result with showTemplate function
showTemplate(button_template, size);

// Button click function, so far only first button reponds to console.log click event
var current_button = size.stretch[0];

$("#length").click(function() {
  console.log("button clicked"); // Only first button responds
  
  var index = $(this).data("id");
  
  current_button = size.stretch[index]; 
  console.log(current_button.value); 
			
});

＆＃13;

#length {
  border: 1px solid #ccc;
  text-decoration:none;
  margin:3px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>

<div id="content"></div>
<!--<div id="message"></div>-->

<script id="button-template" type="text/x-handlebars-template">

  <div class="row">
    <div class="col-xs-12 col-md-8 photo"> 
        
      <div id="car">
        <p>Choose one of available sizes :</p>
        <div id="item_qty">       
          {{#each stretch}}
            <button type='button' id='length' class='btn btn-link' data-id="{{@index}}">{{inches}}</button>
          {{/each}} 
      </div>
      </div>
    
  </div> <!-- / col -->

  </div> <!-- / row -->
</script>

＆＃13;

＆＃13;

＆＃13;