ajax всегда использовать первый вход jinja для циклического ввода

Question

У меня появляется очень простое модальное окно, позволяющее пользователям выполнять поиск в базе данных. Все работает нормально, за исключением того факта, что ajax продолжает возвращать первый ввод независимо от того, нахожусь ли я во втором поле ввода.

Я вижу из консоли, что вызывается автозаполнение jquery, и основная проблема заключается в том, что я ввел во второй ввод, ajax отправляет первое поле ввода.

Я использую each () и this для своей функции скрипта. Я не знаю, что мне делать. Пожалуйста, помогите спасибо!

          {% for food, food_quant, food_unit, detect, nutrition in food_output %}
          <tr>
            <td>
              <a href="/updatefood/{{ food_db.id }}/{{loop.index}}" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#modaledit{{ loop.index }}">Edit</a>
            </td>
            <td id = '{{ 'not_in_db' if  detect == 1 else 'looks_like_db' if detect == 2 }}'>{{ food }}</td>
            <td id = '{{ 'not_in_db' if detect == 1 else 'looks_like_db' if detect == 2 }}'>{{ food_quant }}</td>
            <td id = '{{ 'not_in_db' if detect == 1 else 'looks_like_db' if detect == 2 }}'>{{ food_unit }}</td>
            <td>{{nutrition[0]}}</td>
            <td>{{nutrition[1]}}</td>
            <td>{{nutrition[2]}}</td>
            <td>{{nutrition[3]}}</td>
            <td><a class="btn btn-warning btn-sm" href="/deletefood/{{ food_db.id }}/{{loop.index}}" role="button">Delete</a></td>
          </tr>
            <!-- Modal Edit food-->
            <div id="modaledit{{ loop.index }}" class="modal fade" role="dialog">
               <div class="modal-dialog">
                  <div class="modal-content">
                     <div class="modal-header">
                        <h4 class="modal-title">Quick Add <img src="{{url_for('static', filename='img/search_icon.png')}}" id="search_img"></h4>
                     </div>
                     <p>It seems like our algorithm didn't serve you well! Search and modify for your food, quantity, or unit and update your log.</p>
                     <div class="modal-body ui-front">
                        <form action="/updatefood/{{ food_db.id }}/{{loop.index}}" method="POST">
                           <div class="text-center">
                              <label>Food</label>
                                <input type="text" class="food_name_search" name="food_name_search" id="food_name_search" value="{{ food }}" placeholder="Search for your food...">
                                <input type="hidden" class="food_id_search" name="food_id_search" id="food_id_search" value =''>
                           </div>
                           <div class="span6">
                              <label>Quantity</label>
                              <input type="text"  name="food_quant" value="{{food_quant}}" placeholder="How many servings?">
                           </div>
                           <div class="span6">
                              <label>Unit</label>
                              <input type="text" class="food_unit_search" name="food_unit_search" id="food_unit_search" value="{{food_unit}}" placeholder="What is the unit?">
                           </div>
                           <div class="modal-footer">
                              <button class="btn btn-primary" type="submit">Update</button>
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                           </div>
                        </form>
                     </div>
                  </div>
               </div>
            </div>
          {% endfor %}
        </tbody>
      </table>
      {% endif %}
    </div>
</section>
<form class="input_form" action="{{url_for('personal')}}" method="post" >
  <br>
  <button type="submit" name="submit" class="input_button">save</button>

</form>


</div>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>

<!-- script for food_autocomplete -->
<script>
    $(".food_name_search").each(function(){
      $(this).autocomplete({
        select: function(event, ui) {
          $('.food_name_search').val(ui.item.label);
          $('.food_id_search').val(ui.item.value);
          return false;
        },
        minLength: 2,
        source: function(request, response) {
            $.ajax({
                method:"post",
                url: '{{ url_for("food_autocomplete") }}',
                data:{search_food:$(".food_name_search").val()},
                success: function(data){
                     response(data);
                   }
                });
              }
          });
        });
</script>