Same ID buttons generated with a Handlebars.js "each" loop won't work when called

Question

Looping over an array of objects with handlebars "each" block to create button elements with id, i expected a jQuery function calling that id to apply to all buttons with the id, apparently i am wrong as only the first button responds. Can't figure out why 1 responds while the rest won't, any help is needed, thanks in advance.

//  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); 
   
});

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

<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>