How to select images inside a div with JS / jQuery

I have an array called “works” that contains 7 images.
They should be displayed in a grid which is defined like this:

<div class="container">
  <div class="row" id="g-work">
  </div><!-- / row -->
</div><!-- / container -->

Now in JS I am filling/replacing “works” with these images and then I want to turn the borders red. However I don’t really understand how to select them correctly. This is supposed to be the correct code but it doesnt seem to work. What is this $(“#g-work img) doing? There are no image tags in #g-work. What does it mean? And why can’t just write var images=works? If I try the code below, my developer tools even tell me that images is not defined. What is the problem here?

for(var i = 0; i < works.length; ++i ) {
  $("#g-work").append("/
    <div class='col-sm-6 col-md-3'>/
      <img class='img-responsive' src='" + works[i] + "'>/
    </div>/
  ");

  var images = $("#g-work img"); 
  $(images[i]).css("border", "2px red");
};


works=["http://www.cutestpaw.com/wp-content/uploads/2016/02/s-That-look.jpg","http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg"]
 
 $.each(works,function(key,value)
 {
   let DIV=$("<div/>",{class:"col-sm-6 col-md-3"});
   let Image=$("<img/>",{class:"img-responsive",src:value,style:"border:solid 2px red;margin-bottom:5px"});
   $(DIV.append(Image)).appendTo("#g-work");
 });
<link target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row" id="g-work">
  </div><!-- / row -->
</div><!-- / container -->

Ok fond the source of the problem, I believe but I don’t understand why its a problem. If choose “2px solid salmon” as border color, it works but if I take “2px red” or “2px ffffff”, it doesn’t.