Increasing data attribute on click

Question

What I'm attempting seems simple enough, but I'm obviously missing something. I have a simple select menu. After selecting a country, the value is passed into a variable, prepended with a hash to change it modify it to the respected id. Using this id I'm attempting to increase the data-size by 1. The only issue is that nothing happens with the data-size.

Here's a FIDDLE.

Things should flow like this:

1. Select country
2. Select value turned into id tag
3. data-size of said id is increased by 1 in the HTML

EDIT/UPDATE

I need the actual data-size value to be updated in the HTML because I have specific CSS that deals with different values.

HTML

<select name="countryList" id="countryList" class="selectBox">
    <option value="" disabled selected>SELECT</option>
    <option value="austria">Austria</option>
    <option value="brazil">Brazil</option>
    <option value="canada">Canada</option>
</select>
<button class="cancel">cancel</button>
<button class="confirm">confirm</button>

<div class="dot" data-size="0" id="austria"></div>
<div class="dot" data-size="0" id="brazil"></div>
<div class="dot" data-size="0" id="canada"></div>

jQuery

var countryPicked = "";

$('.confirm').on(touchClick, function(){
    countryPicked = $('#countryList').val();
    countryPicked = ($('#' + countryPicked));
    var i = countryPicked.data('size');
    countryPicked.data('size', i + 1);
});

Answer 1

Try changing touchClick to "click"

The DOM will not be changed visibly, because it is stored internally.

use attr('data-size',i + 1) if you want the DOM to be updated

Demo

Answer 2

Try doing

countryPicked.attr('data-size', i+1);

There seems to be something wrong with .data(), it can only READ the property, not SET it.

Answer 3

First of all please modify the handler to:

$('.confirm').on(`click`, function(){
   //code here
});

For multiple events, give comma separated value as event.

Also note that changes will not be reflected in console. However you can check them using alert or console.log

Working Demo

jQuery stores the data internally if they don't exist the first time you set them. If you really want to force it:

countryPicked.attr('data-size', i + 1);

Answer 4

This works for me:

Fiddle: http://jsfiddle.net/GtT3Q/13/

$('.confirm').click(function(){
   var countryPicked = $('#countryList').val();
   countryPicked = $('#' + countryPicked);
   var i = parseInt(countryPicked.attr('data-size'));
   countryPicked.attr('data-size', i + 1);
});