JSFiddle - React, Tailwind, and code Playground

by justrealmilk

HTML

<select name="dimensions">
    <option value="0.7">4x6&quot;</option>
    <option value="1.7" selected="selected">5x7&quot;</option>
    <option value="3.43">10x15&quot;</option>
</select>

<button type="button" data-post='{"via":"xhr","id":1,"name":"Untitled","dimensions":"","price":0,"qty":0,"url":"/folio/astro"}'>click</button>

JavaScript

$.trolley = [];

$('select').on('change', function() {
    var configure = $('section#trolley.configure');
    $('span.price', configure).html(this.value * 10);
});

$('button').click(function(){
    var grocery = $(this).data('post');
    grocery.qty = 1;
    grocery.dimensions = $('select').find(":selected").text();
    grocery.price = $('span.price').html();
    
    console.log(grocery.dimensions);
    
    var matches = $.grep($.trolley, function(element){ 
        if ((element.id == grocery.id) && (element.dimensions == grocery.dimensions)) {
            console.log('t', element, grocery);
            return true;
        } else { 
            console.log('f', element, grocery);
            return false;
        } 
    });
    
    if (matches.length == 0) {
        $.trolley.push(grocery);
    }
    else if (matches.length == 1) {
        $.each($.trolley, function(i, v) {
            if ($.trolley[i].id == matches[0].id) {
                if ($.trolley[i].dimensions == matches[0].dimensions) {
                    $.trolley[i].qty = parseFloat($.trolley[i].qty) + 1;
                }
            }
        });
    }
    else {
        
    }
    
    if ($.trolley.length > 0) {  }
    
    console.log($.trolley);
    
});