html 里如何给循环添加的同 id 元素绑定同样的 js 脚本？

Flask 项目，在前端页面通过 Jinja2 模板的循环语句从列表中获取 object，并根据 object 的信息添加 div

{% for item in posts %}
<button type="button" class="btn btn-default" id="more_bt">      
</button>

<div id="content" class="content">
{{item.content|safe}}
</div>
{% endfor %}

现在的问题是希望在 div 中的<button>中绑定以下的 js 脚本，但是由于使用getElementById所以 js 只能获取第一个 id="more_bt"的<button>元素

  <script>
                    var btn = document.getElementById('more_bt');
                    var btn_less = document.getElementById('less_bt');
                    var obj = document.getElementById('content');
                    var total_height = obj.scrollHeight;//文章总高度
                    var show_height  = 20;//定义原始显示高度

                    if(total_height>show_height){
                        btn.style.display = 'block';
                        btn.onclick = function(){
                            obj.style.height = total_height + 'px';
                            btn.style.display = 'none';
                            btn_less.style.display = 'inline';
                        }
                        btn_less.onclick = function(){
                            obj.style.height =  show_height + 'px';
                            btn_less.style.display = 'none';
                            btn.style.display = 'inline';
                        }
                    }
                    </script> 

求解该如何将 js 脚本应用到循环添加的每个部件上