Here are a few tips which should help you get your galleries working as expected:

(1) Load the 'juicebox.js' file only once per web page (not once per gallery).

(2) Unless your galleries are nested within parent containers which have been given dimensions via CSS, set gallery dimensions in the embedding code. As you do not currently set dimensions, default values of 100% will be used for both the width and height and unless Juicebox can determine when the 100% refers to, you may have problems with gallery sizing. Try using something like:

galleryWidth: '100%',
galleryHeight: '600',

(3) If you have uploaded your entire gallery folders ('live' and 'travel' to your web server), then I would recommend using a baseUrl (to point to your gallery folder) instead of a configUrl. If you use only a configUrl, then the paths to the images within the 'config.xml' file may be incorrect (unless you have edited them manually).

(4) Use relative paths for the configUrl or baseURL. If you hardcode the emmamasseyphoto.com domain in the path, then your gallery will not display if a visitor goes to the www.emmamasseyphoto.com subdomain

I do not see any problem with the containerId entries in the code you posted so you should not be getting any "Cannot find div with id" messages.

Try the following and if it does not work, please double-check that the entire 'live' and 'travel' gallery folders have been uploaded to your root directory.

<script src="/live/jbcore/juicebox.js"></script>   

<script type="text/javascript">
    new juicebox({
        baseUrl: "/live/",           
        containerid: "livecontainer1",
        backgroundColor: "rgba(0,0,0,0.9)",
        galleryTitle: "Live",
        showSplashPage: "ALWAYS",
        showOpenButton: "false",
        galleryTitlePosition: "NONE",
        showThumbsOnLoad: "false",
        imageTransitionType: "CROSS_FADE",
        captionPosition: "OVERLAY_IMAGE",
        imageNavPosition: "IMAGE",
        galleryWidth: "100%",
        galleryHeight: "600"
    });
</script>
<div id="livecontainer1"></div>

<script type="text/javascript">
    new juicebox({
        baseUrl: "/travel/",
        containerid: "travelcontainer",
        backgroundColor: "rgba(0,0,0,0.9)",
        galleryTitle: "Travel",
        showSplashPage: "ALWAYS",
        showOpenButton: "false",
        galleryTitlePosition: "NONE",
        showThumbsOnLoad: "false",
        imageTransitionType: "CROSS_FADE",
        captionPosition: "OVERLAY_IMAGE",
        imageNavPosition: "IMAGE",
        galleryWidth: "100%",
        galleryHeight: "600"
    });
</script>
<div id="travelcontainer"></div>

If you continue to experience difficulties, please post the URL to your web page so that I can take a look and help further.

Your galleries themselves seem to be OK. The 'config.xml' files and images seem to be in the correct locations on your web server. The problem seems to be with your embedding page.

When I load your web page, it initially seems to load OK but then some code on your web page appends #home to the URL and this is when the 'Juicebox Error: Cannot find div with id: "travelcontainer"' message is displayed and the browser fails to load the page (with a continuous spinning icon in the browser tab).

First of all, try fixing the errors on your web page so that the code on your web page validates correctly.
You can check the code on your web page with the W3C Markup Validation Service and then fix the errors reported.

Also, try removing whatever code is adding #home to the URL when the web page loads to see if this helps.