Javascript 具有动态信息的Wordpress表单发布

我们有一个wordpress网站，它有一个自定义的主题，是用Laravel创建的。它是由一位不再与该公司合作的开发商制作的。我一直在努力恢复他结束的地方，但这对我来说是新的，我还在学习。所以有一个“配置器表单”

$addons=get_字段（'create_add_on'，get_ID（））；
@endphp
@如果（$addons）
产品配置器
$addons = get_field('create_add_on', get_the_ID());

@endphp
@if($addons)
<div class="section-title">
  Product Configurator <i class="fas fa-cog" aria-hidden="true"></i>
</div><!-- /.section-header -->
<form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post" class="configurator">
  <input type="hidden" name="action" value="brochure_enquiry">
  <nav>
    @include('brochure.configurator.parent-tabs')
  </nav>


  <div class="tab-content" id="nav-tabContent">

    @foreach($addons as $addon)

    @php
    $conditions = App::conditions($addon);
    $index = $loop->iteration;
    @endphp



    <div class="tab-pane fade show group-tab {{$loop->iteration == 1 ? 'active' : ''}}"
      data-group="group-{{$loop->iteration}}" id="nav-{{$index}}" role="tabpanel" aria-labelledby="nav-{{$index}}-tab">
      <div class="row">

        <div class="col-12 col-lg-9 col-xl-12 items-container">
          <div class="row  ">

            @if($addon['acf_fc_layout'] === "attribute_group")
            @include('brochure.configurator.attribute')

            @else

            @include('brochure.configurator.group')

            @endif

          </div><!-- /.group -->
        </div><!-- /.row -->
      </div><!-- /.row -->
    </div>

    @include('brochure.configurator.contact-form')

    @endforeach

  </div>

</form>


<script id="selected-template" type="text/template">
  <div class="selected-item-form d-flex align-items-center" data-id="$id">
  <div class="selected-item-image">
    <img src="$image" alt="">
  </div><!-- /.select-image -->
  <div class="item-details">
    $title
  </div><!-- /.item-details -->
</div><!-- /.selected-item-form -->
</script>
@endif

@if($loop->last)

<div class="tab-pane fade show  " id="nav-{{$loop->iteration + 1}}" role="tabpanel"
  aria-labelledby="nav-{{$loop->iteration + 1 }}-tab">
  <div class="row">
    <div class="col-sm-12 col-lg-4 col-xl-3 selected-items p-0 ">
      <div class="selection-group-items">
        @foreach($addons as $addon)
        <h4>
          Selected {{$addon['group_title']}}
        </h4>

        <div class="selected-group-items-inner group-{{$loop->iteration}}">
          <div class="empty">You have not selected any {{$addon['group_title']}}</div><!-- /.empty -->
        </div><!-- /.selected-group-items -->
        @endforeach

      </div><!-- /.selection-group-items -->
    </div><!-- /.col-sm-12 col-lg-9 -->

    <div class="col-sm-12 col-lg-8 col-xl-9">
      <div class="configurator-form">
        <div class="row">
          <div class="col-sm-12">
            <h2>Your Details</h2>
          </div>
          <div class="col-sm-12 col-lg-6"><label for="first_name">
              Your name<br />
              <input required type="text" name="name" placeholder="John" id="">
            </label></div><!-- /.col-sm-12 col-lg-6 -->
          <div class="col-sm-12 col-lg-6"><label for="email">
              Your Email<br />
              <input required type="email" name="email" placeholder="john@example.com" id="">
            </label></div><!-- /.col-sm-12 col-lg-6 -->
          <div class="col-sm-12 col-lg-6"><label for="phone">
              Landline Number <br />
              <input type="text" name="phone" placeholder="028 9011 2345" id="">
            </label></div><!-- /.col-sm-12 col-lg-6 -->
          <div class="col-sm-12 col-lg-6"><label for="phone">
              Mobile Number <br />
              <input required type="text" name="mobile" placeholder="077 1234 1234" id="">
            </label></div><!-- /.col-sm-12 col-lg-6 -->


          <div class="col-sm-12">
            <h2>Your Address</h2>
          </div>
          <div class="col-sm-12 col-lg-6"><label for="address">
              Address Line 1<br />
              <input required type="text" name="address" placeholder="address" id="">
            </label></div><!-- /.col-sm-12 col-lg-6 -->
          <div class="col-sm-12 col-lg-6"><label for="address2">
              Address Line 2<br />
              <input  type="text" name="address2" placeholder="address" id="">
            </label></div><!-- /.col-sm-12 col-lg-6 -->
          <div class="col-sm-12 col-lg-6"><label for="town">
              Town<br />
              <input required type="text" name="town" placeholder="town" id="">
            </label></div><!-- /.col-sm-12 col-lg-6 -->
          <div class="col-sm-12 col-lg-6"><label for="postcode">
              Post Code<br />
              <input required type="text" name="postcode" placeholder="FT40 6TF" id="">
            </label></div><!-- /.col-sm-12 col-lg-6 -->
         
         @foreach($addons as $key => $addon)
                
        <input id="addons" name="addon[<?= $key ?>]" type="hidden" value="<?=$addon['title'] ?>"            
        
        @endforeach
          <div class="col-sm-12">
            <hr>
            <button type="submit" class="btn btn-primary">
              Request a call
            </button>
          </div>
        </div><!-- /.row -->
      </div>
    </div>
  </div><!-- /.row -->


</div><!-- /.tab-pane -->

@endif