Passing php data to a materialize modal

Question

I am creating a confirmation pop up using materializecss modals to delete a specific record displayed on the page. Each record has its' own delete button to delete the question that the record is connected to. There php value $questionCnt is what refers to the record to delete.

I currently have a working method to delete the selected record, as long as it is not within a modal. My issue then comes when trying to pass the $questionCnt data to the modal. It keeps defaulting back to the first array value at index 0. I have commented this in my non-working code where exactly it happens at.

So instead of deleting the selected record it will delete the first record regardless of the selected record.

Initialization

$(document).ready(function(){
   $('.modal-trigger').leanModal();
});

Working Solution Without Modal

    <form method="link" id="deleteQuestionForm" action="{{ url('api/question/deletequestiondata/') }}">
        <input type="hidden" id="questionToDelete" value=<?php echo '"' .  $questionData[$questionCnt] . '"'; ?> name = 'questionID'>
        <input type="hidden" id="urlForSurvey" value="{{$surveyName}}"  name = 'urlForSurvey'>
        <button class="btn waves-effect waves-light" value="+" id="deleteQuestionButton" name="action" onclick="document.getElementById('deleteQuestionForm').submit();">
           <input type="submit" value="Delete Question">
        </button>
    </form>

Non-Working Solution Within Modal

@foreach($questiondata as $d)
<?php $questionCnt++; ?>
<div class="card white darken-1 hoverable">
   <div class="card-content black-text">
     <span class="card-title"><b>{{$d->questionTxt}}</b></span>
     <div class="card-action">
       <div class="button right">
        <button class="waves-effect waves-light btn" >
           <i class="material-icons left">mode_edit</i>Edit
        </button>
        <button class="waves-effect waves-light btn modal-trigger red" href="#deletePopUP">
           <i class="material-icons">delete</i>
         </button>
         <?php echo $questionCnt ; ?>       <!-- Will print the correct index -->                                      
         <div id="deletePopUP" class="modal">
             <?php echo $questionCnt ; ?>   <!-- Will always print the first index -->
             <div class="modal-content">
                 <h4 align="center">Are you sure you wish to delete this question?</h4>
             </div>
             <div class="modal-footer" align="center">
                 <form method="link" id="deleteQuestionForm" action="{{ url('api/question/deletequestiondata/') }}">
                     <input type="hidden" id="questionToDelete" value=<?php echo '"' .  $questionData[$questionCnt] . '"'; ?> name = 'questionID'>
                     <input type="hidden" id="urlForSurvey" value="{{$surveyName}}"  name = 'urlForSurvey'>
                     <button class="btn waves-effect waves-light" value="+" id="deleteQuestionButton" name="action" onclick="document.getElementById('deleteQuestionForm').submit();">
                         <input type="submit" value="Delete Question">
                     </button>
                 </form>
                 <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">No, Return
                 </a>
              </div>
           </div>                                        
       </div>
   </div>
</div>
 </div>@endforeach

Answer 1

The issue has been resolved.

In order to pass the php value into the modal is to add it to the hrefof both the button that activates the modal and adjust the id of the modal tag.

Code that was changed to resolve the issue

<button class="waves-effect waves-light btn modal-trigger red" 
                  href="#deletePopUP<?php echo $questionCnt?>">
    <i class="material-icons">delete</i>
</button> 

<!-- Are you sure prompt -->
<div id="deletePopUP<?php echo $questionCnt?>" class="modal">
   <div class="modal-content"> 

<!-- Rest of modal content stayed the same -->