So I've created a simple macro partial that just generates a button with a specific style. It looks a little like this:

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@using Tessa.Utils

@{
    string btnLabel = Model.MacroParameters["label"].ToString();
    string btnURL = Model.MacroParameters["linkURL"].ToString();
    string tabAttr = "";
    int newTab = Int32.Parse(Model.MacroParameters["newTab"].ToString());

    if (newTab == 1)
    {
        tabAttr = "target=\"_blank\"";
    }
}

@if (Request.Url.AbsolutePath.Contains("GetMacroResultAsHtmlForEditor"))
{
    <!-- START UMBRACO BLUE BUTTON MACRO | DO NOT EDIT SOURCE -->
    <p class="blueButton">
        <span>@btnLabel</span>
    </p>
    <!-- END UMBRACO BLUE BUTTON MACRO -->
}
else
{
    <a class="blueButton" href="@Utils.CheckEmptyUrl(btnURL)" @tabAttr>
        <span>@btnLabel</span>
    </a>
}

I've used it in the RichText Editor where I only had one button, and it works beautifully. However, this issue occurs when Save and/or Publish the page after I create two buttons in the same editor.

This is what it looks like after I insert the macros (I also typed "divider" in a paragraph between the two macros).

<div class="umb-macro-holder BlueButton mceNonEditable umb-macro-mce_0">
    <!-- <?UMBRACO_MACRO macroAlias="BlueButton" label="Button Test 1" linkURL="" newTab="0" /> --><ins>
        <!-- START UMBRACO BLUE BUTTON MACRO | DO NOT EDIT SOURCE -->
        <p class="blueButton"><span>Button Test 1</span></p>
        <!-- END UMBRACO BLUE BUTTON MACRO -->
    </ins>
</div>
<p>Divider</p>
<p> </p>
<div class="umb-macro-holder BlueButton mceNonEditable umb-macro-mce_1">
    <!-- <?UMBRACO_MACRO macroAlias="BlueButton" label="Button Test 2" linkURL="" newTab="0" /> --><ins>
        <!-- START UMBRACO BLUE BUTTON MACRO | DO NOT EDIT SOURCE -->
        <p class="blueButton"><span>Button Test 2</span></p>
        <!-- END UMBRACO BLUE BUTTON MACRO -->
    </ins>
</div>

After I Save and/or Publish, I can only see the first one in the editor, but when I look at the HTML of the editor, I can see this:

<div class="umb-macro-holder mceNonEditable">
    <!-- <?UMBRACO_MACRO macroAlias="BlueButton" label="Button Test 1" linkURL="" newTab="0" />
    <p>Divider</p>
    <?UMBRACO_MACRO macroAlias="BlueButton" label="Button Test 2" linkURL="" newTab="0" /> -->
    <ins>
        <!-- START UMBRACO BLUE BUTTON MACRO | DO NOT EDIT SOURCE -->
        <p class="blueButton"><span>Button Test 1</span></p>
        <!-- END UMBRACO BLUE BUTTON MACRO -->
    </ins>
</div>

What is happening and how can I make it stop consolidating these macros in the editor? When I view the page, the two buttons are rendered correctly. However, it's nearly impossible to edit the second one because I can't see it in the editor. Any help is appreciated.

P.S. This is my first question, so I'm not sure if I put it in the correct category.