PHP循环中动态添加外部JS按钮，AJAX响应正常但输入框无法填充

我需要给跟着语言（en、fr等）循环生成的输入框旁添加按钮，点击按钮调用PHP AJAX接口，将返回内容填充到对应输入框。内嵌JavaScript时功能正常，但改用外部注入脚本后，AJAX能获取响应，却无法填充输入框。

核心代码展示 #

生成输入框的PHP循环代码 #

<?php
for ($i = 0, $n = \count($languages); $i < $n; $i++) {
?>
<div class="row" id="productsSeoTitle<?php echo $i ?>">
  <div class="col-md-12">
    <div class="form-group row">
      <label for="<?php echo $Products->getDef('text_products_page_title'); ?>"
             class="col-1 col-form-label"><?php echo $Products->getDef('text_products_page_title'); ?></label>
      <div class="col-md-4 input-group" id="products_head_title_tag<?php echo $i; ?>">
        <?php echo '&nbsp;' . HTML::inputField('products_head_title_tag[' . $languages[$i]['id'] . ']', SeoAdmin::getProductsSeoTitle($pInfo->products_id, $languages[$i]['id']), 'maxlength="70" size="77" id="products_head_title_tag_' . $i . '"', false); ?>
      </div>
    </div>
  </div>
</div>
<?php } ?>

外部注入的PHP/JS代码 #

// 循环生成多语言相关变量
for ($i = 0, $n = \count($languages); $i < $n; $i++) {
  $this->app->loadDefinitions('Module/Hooks/seo_title');
  $question = $this->app->getDef('text_seo_page_title_question', $languages[$i]['id']);
  $seo_page_title[$i] = $question .  $ProductsAdmin->getProductsName($id, $languages[$i]['id']);
  // 输出为JS变量
  echo "var seo_page_title_$i = '".addslashes($seo_page_title[$i])."';\n";
}

// 构造按钮HTML
$content .= '<button type="button" class="btn btn-primary btn-sm" id="submit-button-' . $i . '">';
$content .= '<i class="bi-chat-square-dots" title="' . $this->app->getDef('text_seo_page_title') . '"></i>';
$content .= '</button>';

// 生成注入脚本
$output = <<<EOD
<script defer>
$('[id^="products_head_title_tag"]').append('{$content}');
</script>

<script defer>
$(document).ready(function() {
  $('[id^="submit-button-"]').click(function() {
    // 提取按钮ID中的索引
    let index = this.id.match(/\d+/)[0];
    
    let message = "{$seo_page_title[0]}"; 
    let ajax = $("#ajax").val();

    $.post("{$url}", {message: message, ajax: ajax}, function(data) {
      $("#output-input").val(data);
      $("#products_head_title_tag_" + index).val(data); 
    });
  });
});
</script>
EOD;
return $output;

问题现象 #

执行后AJAX请求能正常获取响应数据，但对应索引的输入框始终无法被填充。

排查进展 #

已经确认问题和循环变量$i相关：移除循环，固定使用$i=0时，输入框填充功能恢复正常。修改后的测试代码片段：

//      for ($i = 0, $n = \count($languages); $i < $n; $i++) {
$this->app->loadDefinitions('Module/Hooks/ClicShoppingAdmin/seo_title');
$question = $this->app->getDef('text_seo_page_title_question', $languages[0]['id']);
$seo_page_title[0] = $question .  $ProductsAdmin->getProductsName($id, $languages[0]['id']);
echo "var seo_page_title_0 = '".addslashes($seo_page_title[0])."';\n";
//    }

希望得到解决方法，让循环生成的所有按钮都能正确填充对应输入框。

内容的提问来源于stack exchange，提问作者Mira