Question: Imagine I try to achieve this : 

A user will see the result of his finished uploaded photo, If the first image existed, attach to the second block, and so on. But my code below has flawed, it attached one photo to all `div`. What's wrong with my logic?

```
$("#photo_area div").each(function(i, obj) {
  i++;
  var stopLoop = false;
  if (!$(obj).attr('style') && stopLoop == false) {
    $(obj).attr('style', 'background:url(http://example.com/' + encodeURI(data.file_name) + ') no-repeat center center');
    $('input[name="photos' + i + '"]').val(encodeURI(data.file_name));
    stopLoop = true;
  }
});

```

My DOM

```
<div id="photo_area">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <input type="hidden" name="photo1">
            <input type="hidden" name="photo2">
            <input type="hidden" name="photo3">
            <input type="hidden" name="photo4">
        </div>

```

**I've created an example,using color as example : <https://jsfiddle.net/m4orLzpr/>**

Answer: 
If you want to stop the loop when an image on the list is not uploaded, you can do this by writing an `else` statement for the `if` condition and moving `stopLoop=true;` to the `else` statement and moving `var stopLoop=false;` outside the loop. Otherwise, there is no use of the `stopLoop` variable.
how do you like this one?
Just did everything in the 

`$.each()` function. and created `<input>` on the go when there's an empty div while iterating.

<https://jsfiddle.net/rcprfq07/>

PS: used jsfiddle logo image for simplicity of example

result:

```
<div id="photo_area">
    <div style="background:url(https://jsfiddle.net/img/logo.png) no-repeat center center"><input type="hidden" name="photos1" value="https://jsfiddle.net/img/logo.png"></div>
    <div style="background:url(https://jsfiddle.net/img/logo.png) no-repeat center center"><input type="hidden" name="photos2" value="https://jsfiddle.net/img/logo.png"></div>
    <div style="background:url(https://jsfiddle.net/img/logo.png) no-repeat center center"><input type="hidden" name="photos3" value="https://jsfiddle.net/img/logo.png"></div>
    <div style="background:url(https://jsfiddle.net/img/logo.png) no-repeat center center"><input type="hidden" name="photos4" value="https://jsfiddle.net/img/logo.png"></div>
</div>

```