Laravel add more field append color and image with js

 

<div class="col-lg-7">

<div class="select-input-color" id="color-section"> <div class="color-area"> <span class="remove color-remove"><i class="fas fa-times"></i></span> <div class="row"> <div class="col-lg-6"> <div class="input-group colorpicker-component cp"> <input type="text" name="color[]" value="#000000" class="input-field cp"/> <span class="input-group-addon"><i></i></span> </div> </div> <div class="col-lg-6"> <div class="input-group colorpicker-component cp"> <input type="file" name="colors_photo[]" class="form-control " /> </div> </div> </div> </div> </div> <a href="javascript:void(0)" id="colorBtn" class="add-more mt-4 mb-3"> {{-- <a href="javascript:;" id="color-btn" class="add-more mt-4 mb-3"> --}} <i class="fas fa-plus"></i>{{ __('Add More Color') }} </a> </div>

<script>

    $(document).ready(function() {

        // Initialize existing color pickers

        $('.cp').colorpicker();

        // Add new color picker on button click

        $(document).on('click', '#colorBtn', function() {

            var colorArea = '<div class="color-area">' +

                '<span class="remove color-remove"><i class="fas fa-times"></i></span>' +

                '<div class="row">' +

                    '<div class="col-lg-6">' +

                        '<div class="input-group colorpicker-component cp">' +

                            '<input type="text" name="color[]" value="#000000" class="input-field cp"/>' +

                            '<span class="input-group-addon"><i></i></span>' +

                        '</div>' +

                    '</div>' +

                    '<div class="col-lg-6">' +

                        '<div class="input-group colorpicker-component cp">' +

                            '<input type="file" name="colors_photo[]" class="form-control"/>' +

                        '</div>' +

                    '</div>' +

                '</div>' +

            '</div>';

            $("#color-section").append(colorArea);

            // Reinitialize the color picker for new elements

            $('.cp').colorpicker();

        });

        // Remove color area

        $(document).on('click', '.color-remove', function() {

            $(this).closest('.color-area').remove();

        });

    });

</script>

//Controller code image insert

  // Handle color photos

            if ($request->has('colors_photo')) {

                $colorsPhotos = $request->file('colors_photo');

                foreach ($colorsPhotos as $key => $colorPhoto) {

                    if ($colorPhoto) {

                        $colorImageName = time().Str::random(8).'.png';

                        $colorPhoto->move('assets/images/products/colors', $colorImageName);

                        $input['colors_photo'][$key] = $colorImageName;

                    }

                }

            }