Client-side rendering (JS Link) status changes in sharepoint list

I would probably do this in two steps...

EDIT: Update based on further conversation with OP in chat -- modified answer to affect two fields and handle MDS

1. Create a calculated column that follows your rules to calculate if a PO should be 'OPEN' or 'CLOSED' The formula for the calculated Status column could be something like: =IF(NOT([Balance Qty]=0), "OPEN", "CLOSED") Using a calculated column, you can do other things later like sort/filter by open or closed POs in list views.

2. Next I would use JSLink Client-Side Rendering to color-highlight your status field when it appears in a list view... I'm assuming you have named the calculated column "Status"

Save this code as a JS file and put it somewhere you can get to it (I saved it as a file called statusHighlighterCsr.js and put it in my site's Asset Library):

// SharePoint Online Automatically uses MDS, so we'll setup our custom rendering
// to play nicely
RegisterModuleInit('/Testing/SiteAssets/statusHighlighterCsr.js', registerStatusHighlighter);
// this will call the rendering function though in case MDS doesn't apply
registerStatusHighlighter();

function registerStatusHighlighter() {
    var statusHighlighterCtx = {};
    statusHighlighterCtx.Templates = {};
    statusHighlighterCtx.Templates.Fields = {
    // Each key value in this object should be the field name
    // so spelling and case matter and should match your list
        "Status": {
            // Each key here should be the view/form you want to use
            // this custom rendering, choices include: 'View', 'DisplayForm',
            // 'EditForm', 'NewForm'. The value should point to the function \
            // that will actually perform the rendering, which we will define 
            // below -- outside of this function.
            "View": statusHighlighterTemplate
        },
        "Order_x0020_Status": {
            "View": openHighlighterTemplate
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusHighlighterCtx);
}

function statusHighlighterTemplate(ctx) {
    // you access the current list item properties with ctx.CurrentItem
    var currItmStatus = ctx.CurrentItem.Status,
        returnNode = document.createElement('span');
    returnNode.appendChild(document.createTextNode(currItmStatus));
    returnNode.style["font-weight"] = "bold"
    if (currItmStatus == "OPEN") {
        returnNode.style.color = "red";
    } else {
        returnNode.style.color = "green";
    }
    return returnNode.outerHTML;
}

function openHighlighterTemplate(ctx) {
    // for the Open Status Field rendering
    var currItmOrdered = ctx.CurrentItem['Open_x0020_Status'],
        returnNode = document.createElement('span');
    returnNode.appendChild(document.createTextNode(currItmOrdered));
    returnNode.style["font-weight"] = "bold"
    if (currItmOrdered == "ORDERED") {
        returnNode.style.color = "green";
    } else {
        returnNode.style.color = "red";
    }
    return returnNode.outerHTML;
}

Note: this is all just standard JS, so no jQuery references required on the page with your list view.

Watch out for a common issue when adding the file to your list view's JSLink property, it expects a URL token like the ones listed here instead of a normal URL... I used a file called statusHighlighterCsr.js that I put in my asset library... so my URL token looks like:

~site/SiteAssets/statusHighlighterCsr.js

That should get you going, I have another answer about JSLink that you can find here with some more information.