Witam, mam taki formularz:

a to jego kawalek kodu:

[HTML] pobierz, plaintext 
<div class="input-group control-group increment" >
                        <label for="file-input" class="text-center">
                            <i class="fa fa-camera fa-4x" style="color: red" aria-hidden="true"></i>
                        </label>
                        <input id="file-input" type="file" name="filename[]" class="form-control hide" capture="camera">
                    </div>
 
                    <div class="control-group input-group clone hide" style="margin-top:10px">
                        <label for="file-input" class="text-center">
                            <i class="fa fa-camera fa-4x" style="color: red" aria-hidden="true"></i>
                            <input type="file" name="filename[]" class="form-control" capture="camera">
                        </label>
 
                    </div>
[HTML] pobierz, plaintext 

Jak widzicie jest tam przycisk ADD ponieważ po jego naciśnięciu ma pojawić się klon inputa żeby wstawić więcej niż jedno zdjęcie:


Problem polega na tym ze w tym pierwszym inpucie jak widać jest klasa form-control hide po to zęby input był ukryty a widoczny był tylko element <i> czyli ta ikonka ale jak dodam hide do sklonowanego inputa to uploaduje mi tylko jeden obrazek z tego inputa podstawowego. Jeżeli zostawię widoczny input to wszystko gra. Tak wygląda kod JS który obsługuje klonowanie.

[HTML] pobierz, plaintext 
$(".btn-success").click(function(){
                var html = $(".clone").html();
                $(".increment").after(html);
            });
[HTML] pobierz, plaintext 

Pomoze mi ktoś ukryć tego inputa żeby po naciśnięciu przycisku ADD pojawiała się tylko ikonka kamery ale i żeby do requesta był przesyłany więcej niż jeden obrazek?

Pozdrawiam