{{-- text input --}}
@include('crud::fields.inc.wrapper_start')
    <label>{!! $field['label'] !!}</label>
    @include('crud::fields.inc.translatable_icon')

    @if(isset($field['prefix']) || isset($field['suffix'])) <div class="input-group"> @endif
        @if(isset($field['prefix'])) <span class="input-group-text">{!! $field['prefix'] !!}</span> @endif
        <input
            type="text"
            name="{{ $field['name'] }}"
            data-init-function="bpFieldInitExtraElement"
            value="{{ old_empty_or_null($field['name'], '') ??  $field['value'] ?? $field['default'] ?? '' }}"
            @include('crud::fields.inc.attributes')
        >
        @if(isset($field['suffix'])) <span class="input-group-text">{!! $field['suffix'] !!}</span> @endif
    @if(isset($field['prefix']) || isset($field['suffix'])) </div> @endif

    {{-- HINT --}}
    @if (isset($field['hint']))
        <p class="help-block">{!! $field['hint'] !!}</p>
    @endif
@include('crud::fields.inc.wrapper_end')

@push('crud_fields_scripts')
    {{-- YOUR JS HERE --}}
    @loadOnce('packages/jquery-ui-dist/jquery-ui.min.js')
    @loadOnce('bpFieldInitExtraElement')
    <script>
          function bpFieldInitExtraElement(element) {
                var question_id = $(element).data('qid');
                var answer_id = $(element).data('aid');
                var extra = $('input[data-extra-qid='+ question_id +']');

                element.on('keyup', function() {
                    updateExtraFieldJson();
                });

                function updateExtraFieldJson() {
                    var $extra = (extra.attr('value') != '') ? $.parseJSON(extra.attr('value')) : '';
                    
                    var value = $(element).val();

                    var extraArray = [
                        {
                            "extra": value,
                            "answer_id": answer_id
                        }
                    ];

                    $.each($extra, function(index, item){
                        if(item.answer_id == answer_id){
                            extraArray.extra = value
                        }else{
                            extraArray.push(item);
                        }
                    });

                    extra.val(JSON.stringify(extraArray));
                }

                // on page load, make sure the input has the old values
            }
    </script>
    @endLoadOnce
@endpush