How to change HTML5 data-attribute value responsively based on screen size

Question

i'm using an Instagram widget to show pics on website.

it uses jquery and works fine, but i think i've hit a limitation with it.

i've got it displaying 2 columns and showing 12 images total. it does this by using "data-attributes" inside a "div" tag. here's an example...

<div class="instawidget" data-amount="12" data-grid="2"></div>

this works fine for tablet & desktop screens, but not mobile (given my particular layout).

so, for smaller screens, i'm trying to change the "data-amount" value from 12 to 6.

i have learned that unfortunately, CSS cannot alter this kind of HTML. so i thought i could just duplicate the div, having one for the 12 & one for the 6, then use CSS Media Queries to show/hide the appropriate div based on min/max-width, like this...

CSS...
@media screen and (min-width: 736px) {
    div.instawidget[data-amount="12"] {
        display: block;
    }
    div.instawidget[data-amount="6"] {
        display: none;
    }
}
@media screen and (max-width: 736px) {
    div.instawidget[data-amount="6"] {
        display: block;
    }
    div.instawidget[data-amount="12"] {
        display: none;
    }
}

HTML...
<div class="instawidget" data-amount="12" data-grid="2"></div>
<div class="instawidget" data-amount="6" data-grid="2"></div>

now, the actual display of each div DOES work - but it doesn't matter, because what does NOT work is, the "data-amount" value of whichever div is on top is the one that sticks.

in other words, if it's as i have above, then both large & small screens will show 12 images. and if i switch it & reverse the order, then both screen sizes will show 6 images.

i've been searching a lot & cannot find that this is necessarily the behavior of html5 data attributes, but i don't know for sure.

so if it isn't, then what am i doing wrong with my css?

if it is, then is there a reasonable cross-browser solution?

i've found a few Jquery & Javascript offerings in other stacks, but i don't know enough about programming those to make them work in this situation. i can usually fudge it enough to get them to work but all the examples were too varied or general for me to see enough patterns to copy.

note: whatever solution ya'll can help me with, i would prefer for the page to NOT have to refresh/reload when the browser window is resized across the breakpoints. ideally, the data-amount would just change & the number of images on the page would just change.

thanks for the help.

Answer 1

I'm not 100% sure I understand your question, but I believe you're just trying to show only 6 images on mobile instead of 12. If that's the case, you can easily accomplish this with CSS without needing to duplicate the widget:

@media only screen and (max-width: 768px) {
  .instawidget li:nth-child(n+7) {
    display:none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="instawidget" data-user-name="kevin" data-amount="12" data-grid="2"></div><script type="text/javascript" src="//www.stadget.com/cdn/widget-init.min.js"></script>