```js
var selectedCountries = {};

var id = 1;
var profile = {};

$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  var profile1 = {};
  profile1.id = id;
  profile1.countryName = countryName;

  $.extend(profile, profile1);
});

$.extend(selectedCountries, profile);

console.log(selectedCountries);
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>
```

I am trying to loop through spans in a div and add the values of spans to a object with one id. I am trying the below, but it adds only one item, how can I add every country and id to object?

[my Fiddle](https://jsfiddle.net/xh8L2594/9/)