JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "sectionControls">
  <h1>Display Sections</h1>
  <div class = "leftCol">
  <p id ="96BackpackBlowerText">Backpack Blower</p>
  <p>Handheld and Backpack Blowers</p>
  <p>Chainsaw</p>
  <p>Hedge Trimmer</p>
  <p>Trimmer</p>
  <p>Accessories</p>
  <p>PAS</p>
  <p>Cordless</p>
</div>

<div class = "rightCol">
  <input type="button" class = "section-info-button" value="i" id = "backpackBlowerSectionInfoBtn" onclick ="showBackpackBlowerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addBackpackBlowerSectionBtn" onclick="addBackpackBlowerSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeBackpackBlowerSectionBtn" onclick="removeBackpackBlowerSection()">

  <br>

  <input type="button" class = "section-info-button" value="i" id = "handheldAndBackpackBlowerSectionInfoBtn" onclick ="showHandheldAndBackpackBlowerSectionInfo()"><input type="button" class = "section-button" value="+" id = "addHandheldAndBackpackBlowerSectionBtn" onclick="addHandheldAndBackpackBlowerSection()"><input type="button" class = "section-button section-remove-button" value="-" id = "removeHandheldAndBackpackBlowerSectionBtn" onclick="removeHandheldAndBackpackBlowerSection()">

  <br>

  <input type="button" class = "section-info-button" value="i" id = "chainsawSectionInfoBtn" onclick ="showChainsawSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addChainsawSectionBtn" onclick="addChainsawSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeChainsawSectionBtn" onclick="removeChainsawSection()"> 

  <br>

  <input type="button" class = "section-info-button" value="i" id = "hedgeTrimmerSectionInfoBtn" onclick ="showHedgeTrimmerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addHedgeTrimmerSectionBtn" onclick="addHedgeTrimmerSection()"> 
  <input type="button" class = "section-button...

CSS

#sectionControls{display:inline-block;}

.leftCol{display:inline-block; margin-left:40px; margin-right:40px;}
.rightCol{display:inline-block;}

.section-button, .section-info-button{background-color: #F15C22; border: none; color: white; margin-bottom:10px; padding: 5px 30px; text-align: center; text-decoration: none; display:inline-block; font-size: 16px;}
.section-button:hover, .section-button:active{background-color:#000000;}
.section-info-button{background-color:gray; margin-right:10px; padding:5px 15px;}

JavaScript

//if(wallHeight === "90"){ //If dealer has a 90 height, we need to show the 90" backpack blower display and hide the normal 96" backpack blower display
      $('<p>Backpack Blower <strong>(90" tall display)</strong></p>').prependTo("#sectionControls .leftCol");
      $("<input type='button' class = 'section-button section-remove-button' value='-'' id = 'remove90BackpackBlowerSectionBtn' onclick='remove90BackpackBlowerSection()'>").prependTo("#sectionControls .rightCol");
      $("<input type='button' class = 'section-button' value='+'' id = 'add90BackpackBlowerSectionBtn' onclick='add90BackpackBlowerSection()'>").prependTo("#sectionControls .rightCol");
      $('<input type="button" class = "section-info-button" value="i" id = "90BackpackBlowerSectionInfoBtn" onclick ="show90BackpackBlowerSectionInfo()">').prependTo("#sectionControls .rightCol");

      //Hide 96" backpack blower section
      $("#96BackpackBlowerText").hide();
      $("#backpackBlowerSectionInfoBtn").hide();
      $("#addBackpackBlowerSectionBtn").hide();
      $("#remove90BackpackBlowerSectionBtn").hide();    
//}