AJAX выбирает только идентификатор первого элемента в цикле DJANGO

AJAX выбирает только идентификатор первого элемента в цикле DJANGO.

Везде, где я нажимаю кнопку "редактировать", он возвращает содержимое первого сообщения. Я использовал подобную методологию в других функциях (например, кнопка "like"), но в этой я не понимаю, почему она выбирает только верхний элемент цикла в каждом шаблоне. Пожалуйста, помогите.

Вот что я придумал на данный момент:

jS:

    //Edit

$('.editfunction').click(function(){
        event.preventDefault()
        var post_pk;
        var content = $('.textarea_edit').val();
        post_pk = $(this).data("post_pk");

        $.ajax({
        type: "POST",
        url: `/post/${post_pk}/edit`,
        data: {
            csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
            post_id: post_pk,
            textarea: content
        },
        success: function(data) {
            $('.modal-edit').modal('hide')
            var content = $('.textarea_edit').val()
            $(`.post-object-content${post_pk}`).html(content)
        }
        })
    })

FOR loop: 

    {% for post in paginated_posts %}
<div style="padding: 10px;" id="{{post.id}}">
    <div style="padding: 10px; border: 1px solid;">
    <p>
    <h4><a href="{% url 'post_view' post.pk %}">{{ post.title }}</a></h4>
</p>
    <p style="display: inline-flex;">
      {% if post.author.profile.id %}
    by: <span style="font-weight: bold;"><a href="{% url 'profile_class' post.author.profile.id %}">&nbsp; {{ post.author }} &nbsp;</a></span>
    {% else %}
    by: <span style="font-weight: bold;">&nbsp; {{ post.author }} &nbsp;</span>    
    {% endif %}
    on {{ post.creation_date }}
    </p>
    <h5 class="card-text post-object-content{{post.id}}">{{ post.post_text }}</h5>
    
<!-- Edit -->
{% if user.is_authenticated %}
{% if user.id == post.author.id %}

<!-- Button modal edit-->
<small><a href="{% url 'post_view' post.pk %}">[Edit]</a></small>

<!-- Modal EDIT -->
<div class="modal fade modal-edit" id="edit" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content new-post-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit post {{ post.id }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <form method=post action="{% url 'edit' post.pk %}">
              {% csrf_token %}
              <textarea rows="10" class="form-control textarea_edit" name="textarea">{{post.post_text}}</textarea>
              <br>
              <div class="modal-footer">
                  <button class="btn btn-primary save editfunction" data-post_pk="{{ post.pk }}" type="submit" value="Save">Submit</button>
              </div>
          </form>
      </div>
    </div>
  </div>
</div>

{% endfor %}

Ваша проблема кроется здесь:

var content = $('.textarea_edit').val();

К сожалению, это работает так, как задумано. Если есть несколько членов селектора класса, .val() будет захватывать первый элемент списка классов с таким именем (см. https://api.jquery.com/val/ для подробностей)

если вы хотите сделать что-то с каждым из значений textarea этого класса, вы можете поместить их в массив с помощью процесса, подобного:

var content = []

$('.textarea_edit').each(function(){
    content.push($(this).val()); 
});
Вернуться на верх