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.
Check this <https://jsfiddle.net/vnathalye/m4orLzpr/5/>
Is that what your are looking for?

Use following selector:

```
$("#photo_area div:not([style]):first")

```

It first selects all the divs that don't have style attribute and then from that list it selects the first div.

**EDIT:**
refer <https://jsfiddle.net/vnathalye/m4orLzpr/6/>
to know how to put the same value in hidden field. I've used normal textbox in the fiddle to see the values getting updated.