如何在点击按钮并再次点击后显示下一张卡片，并再次显示下一张卡片到最后一张卡片并使用jquery提交？

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<button id="nextButton">下一张</button>
<div id="cardContainer"></div>

$(document).ready(function() {
  var cards = ["卡片1内容", "卡片2内容", "卡片3内容"]; // 卡片内容数组
  var currentIndex = 0; // 当前卡片索引

  // 初始化显示第一张卡片
  $("#cardContainer").text(cards[currentIndex]);

  // 按钮点击事件处理
  $("#nextButton").click(function() {
    currentIndex++; // 索引递增

    // 判断是否到达最后一张卡片
    if (currentIndex < cards.length) {
      $("#cardContainer").text(cards[currentIndex]); // 显示下一张卡片内容
    } else {
      // 到达最后一张卡片，执行提交操作
      // 可以在这里编写提交代码，例如使用Ajax提交表单数据
      // 以下代码仅作示例，实际情况根据需求进行修改
      $.ajax({
        url: "提交接口地址",
        method: "POST",
        data: { cardContent: cards[currentIndex - 1] },
        success: function(response) {
          // 提交成功后的处理
          console.log("提交成功");
        },
        error: function() {
          // 提交失败后的处理
          console.log("提交失败");
        }
      });
    }
  });
});