JSON Calls with Variables

HTML

<section class="Worksheet" id="Description">
    <div class="cell" data-styleID="Default">
        <p class="data">This is the contents of Description Cell 1</p>
    </div>
    <div class="cell" data-styleID="s57">
        <p class="data">This is the contents of Description Cell 2</p>
    </div>
</section>
<section class="Worksheet" id="Features">
    <div class="cell" data-styleID="s57">
        <p class="data">This is the contents of Features Cell 1</p>
    </div>
    <div class="cell" data-styleID="Default">
        <p class="data">This is the contents of Features Cell 2</p>
    </div>
</section>
<section class="Worksheet" id="Details">
    <div class="cell" data-styleID="s58">
        <p class="data">This is the contents of Details Cell 1</p>
    </div>
    <div class="cell" data-styleID="s57">
        <p class="data">This is the contents of Details Cell 2</p>
    </div>
</section>
<div class="output">
    <strong>Manually entered StyleID</strong> <em>(Works)</em>:
</div>
<div class="desired-output">
    <strong>Dynamically generated StyleID</strong> <em>(Does not work)</em>:
</div>

CSS

* {
    font-family: sans-serif;
}
.data {
    font-size: 10px;
}
.output strong {
    color: red;
}
.desired-output strong {
    color: darkgreen;
}

JavaScript

$(document).ready(function(){
    // JSON 'Styles'
var styles = {
  "Default":{
    "Name":"Normal",
    "Vertical":"Bottom",
    "FontName":"Calibri",
    "Family":"Swiss",
    "Size":"11",
    "Color":"#000000"
  },
  "s57":{
    "Name":"Hyperlink",
    "FontName":"Calibri",
    "Family":"Swiss",
    "Size":"11",
    "Color":"#0066CC",
    "Underline":"Single"
  },
  "s58":{
    "Horizontal":"Left",
    "Vertical":"Center",
    "Indent":"1"
  }
};
    $('.Worksheet').each(function(){
        
        var data = $(this).find('.data');
        
        data.each(function(i, el){
           
            var cell = $(this).parent('.cell');
            var styleId = cell.data('styleid');
            var value = $(this).text();
            $('.output').append('<p>' + styles.s57.Color + '</p>');
            // Where "styleId" is inserting this cell's 'data-styleId' attribute value
            $('.desired-output').append('<p>' + styles[styleId].Color + '</p>');
        });
        
    });
});