When creating a dynamic form in HTML using Laravel and then calling it through JQuery, I encountered an issue where the first form created showed an undefined form ID, but subsequent forms displayed their form IDs. How can this issue be resolved? Below is the code I am working with:
@for($i =1;$i<=60; $i++)
<form action="{{ route('assign-files') }}" method="POST" id="formfile{{$i}}">
@csrf()
<div class="form-group row">
<input type="hidden" name="campaign_id" value="{{$campaignObj->campaign_id}}" id='campignId'>
<input type="hidden" name="order" value="{{$i}}" id="fileId">
<label for="inputEmail3" class="col-2 col-form-label">Day {{$i}}</label>
<div class="col-6">
<select class="form-select recordingForm_id" aria-label="Default select example" id="recordingForm_id{{$i}}" name="campaign_type_id">
<option selected>Select</option>
@foreach($recordingObj as $recording)
@if(checkFileOnCompain($campaignObj->campaign_id, $recording->id, $i))
<option value="{{$recording->id}}" selected>{{$recording->file_name}}</option>
@else
<option value="{{$recording->id}}">{{$recording->file_name}}
</option>
@endif
@endforeach
</select>
[</div>][1]
</div>
</form>
@endfor
//jQuery code
<script type='text/javascript'>
$(document).ready(function() {
var recordingForm_id ='';
var selectVal='';
var formId ='';
var campignId='';
var fileId='';
$('.recordingForm_id').change(function() {
var recordingForm_id = $(this).attr('id');
var selectVal = $("#"+recordingForm_id+" option:selected").val();
var formId = $('#'+ recordingForm_id).parent().parent().parent().attr('id');
var campignId = $('#campignId').val();
var fileId = $('#fileId').val();
$('#'+formId).submit();
});
});
</script>