Несколько кнопок в цикле for не работают из-за одинакового id

Итак, я хочу создать сайт, который имеет несколько коинтейнеров для каждого объекта в моей базе данных и те же 2 кнопки на каждом, "reguli" и "cumpara", все работает нормально, пока я не нажимаю на кнопки. Они работают только для первого контейнера. Я предполагаю, что имея одинаковый id для каждой кнопки всех контейнеров, они работают только как одна. Как я могу изменить id кнопок для каждого объекта в базе данных?

-EVENIMENTE- 
<div class="feturedimage">
    <div class="row firstrow">
        <div class="col-lg-6 costumcol colborder1">
            <div class="row costumrow">
          {% for obj in events %}
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 txt1colon ">
                    <div class="featurecontant">

                        <h1>{{obj.Nume}}</h1>
                      <p>"{{obj.Descriere}}"</p>
                        <h2>Price {{obj.Pret}}</h2>
                        <button id="btnRM" onclick="rmtxt()">REGULI</button>

                        <div id="readmore">
                                <p>Biletele se cumpara cu cardul
                                    nu se poate da refund
                                    distractie faina!
                                </p>



                                <button id="btnRL">READ LESS</button>
                        </div>

                        <button id="btncumpara" onclick="rmtxt()">CUMPARA</button>

                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="col-lg-6 costumcol colborder2">
            <div class="row costumrow">

    </div>
</div>

У вас должны быть разные идентификаторы, поэтому вы можете использовать obj.id‍(id="btnRM-{{obj.id}}" ) или forloop.counter (id="btnRM-{{forloop.counter}}"), чтобы установить разные id для каждой кнопки контейнера:

{% for obj in events %}
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 txt1colon ">
        <div class="featurecontant">
          <h1>{{obj.Nume}}</h1>
          <p>"{{obj.Descriere}}"</p>
          <h2>Price {{obj.Pret}}</h2>

          <button id="btnRM-{{obj.id}}" onclick="rmtxt()">REGULI</button>
            <div id="readmore">
                <p>Biletele se cumpara cu cardul
                    nu se poate da refund
                    distractie faina!
                </p>

                <button id="btnRL">READ LESS</button>

            </div>

            <button id="btncumpara-{{obj.id}}" onclick="rmtxt()">CUMPARA</button>

        </div>
    </div>
{% endfor %}
Вернуться на верх