Assigning a id+index value to a form field for manipulation using Alpine Js / Javascript in Laravel

 

Answer

Sorted by:

                                              Highest score (default)                                                                   Date modified (newest first)                                                                   Date created (oldest first)                              

1

Inside an Alpine.js attribute you can use any JS (but not HTML the way you tried). So the correct method to create dynamic id attributes is just to use template literals and pass the active item's index to the replaceQuotes function.

<input x-model="field.descrip" 
       type="text" 
       class="form-control rounded-lg text-sm"
       name="descrip[]" 
       value="" 
       style="width:300px" 
       :id="`descrip_id${index}`" 
       @blur="replaceQuotes(index)" />


<script>
function replaceQuotes(id) {
  var x = document.getElementById(`descrip_id${id}`)

  x.value = x.value.replace(/\"/g, " inch ")
  x.value = x.value.replace(/\'/g, " ft ")
}
</script>