diff --git a/BUGs b/BUGs
index fe4c041..bb7dab9 100644
--- a/BUGs
+++ b/BUGs
@@ -7,8 +7,6 @@
 ### UI not updating after DB change:
 BUG-3:		alter a condition, covertype, etc. and its not in drop-down list (even though db look via index is correct, e.g books.html shows updated covertype)
 BUG-7:		if you remove a series from a book, it won't appear in the series drop-down if it is the first 'missing' book in that series -- either reset the list, or show all series always?
-BUG-20:		broken gui with bs5:
-			* series add/rem needs to lose divs inside divs of input groups (and templ)
 
 ### ordering of data in UI:
 BUG-6:		author,series, etc. do not have explicit ordering like sub-books... sort of irritating / needs code and DB fix
diff --git a/templates/book.html b/templates/book.html
index 4154b92..ce1f6d1 100644
--- a/templates/book.html
+++ b/templates/book.html
@@ -1,29 +1,26 @@
 {% extends "base.html" %}
 {% block main_content %}
 
+
 {# use tmpl-series-div as a template & keep it hidden always #}
 <div id="tmpl-series-div" class="col input-group" style="display:none">
-	<div id="series-minus-div-NUM" class="input-group-prepend">
-		<button id="series-minus-but-NUM" class="btn btn-outline-danger" type="button">
-			<svg width="22" height="22" fill="currentColor">
-				<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
-			</svg>
-		</button>
-	</div>
+	<button id="series-minus-but-NUM" class="btn btn-outline-danger input-group-prepend" type="button">
+		<svg width="22" height="22" fill="currentColor">
+			<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
+		</svg>
+	</button>
 	<input type="hidden" id="bsl-book_id-NUM" name="bsl-book_id-NUM" value="{{books.id}}">
-	<span class="form-control col-2">Book&nbsp;</span>
-	<input type="text" id="bsl-book_num-NUM" name="bsl-book_num-NUM" class="form-control col-1" placeholder="number">
-	<span class="form-control col-1">&nbsp;of&nbsp;</span>
+	<span class="form-control col-2 input-group-text">Book&nbsp;</span>
+	<input type="text input-group-text" id="bsl-book_num-NUM" name="bsl-book_num-NUM" class="form-control col-1" placeholder="number">
+	<span class="form-control col-1 input-group-text">&nbsp;of&nbsp;</span>
 	<select class="form-select col" id="bsl-series_id-NUM" name="bsl-series_id-NUM">
 	{% for s in poss_series_list %}
 		<option value="{{s.id}}">{{s.title}}</option>
 	{% endfor %}
 	</select>
-	<div id="series-plus-div-NUM" class="input-group-append">
-		<button id="series-plus-but-NUM" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()">
-			<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
-		</button>
-	</div>
+	<button id="series-plus-but-NUM" class="btn btn-outline-success input-group-append" type="button" onClick="AddBookToSeries()">
+		<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
+	</button>
 </div id="tmpl-series-div">
 
 <script>
@@ -94,12 +91,6 @@ function ConfirmRemoveThisSubs_ParentAndSubsFromSeries(pid,bid,rem)
 	$('#RPS-one').attr( 'onClick', "$('#dbox').modal('hide') ; $.post( '/rem_parent_books_from_series/" +bid + "' ) ; window.location='/book/"+ bid + "'" )
 }
 
-function SeriesButPlus(num) {
-	return '<div id="series-plus-div'+num+'" class="input-group-append"><button id="series-plus-but-'+num+'" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()">
-		<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
-	</button></div>'
-}
-
 function AddBookToSeries() {
 
     // Read the Number from that DIV's ID (i.e: 3 from "series-div-3") -- could
@@ -112,15 +103,16 @@ console.log( "last_div is=" + last_div.prop('id') )
 
 	// adding means at least one, so remove filler (even if its removed already) & remove active plus div, new_div below will have active plus
 	$('#series-div-0').hide();
-	last_div.find('#series-plus-div-'+num).remove()
+	last_div.find('#series-plus-but-'+num).prop( 'disabled', true )
+	last_div.find('#series-plus-but-'+num).addClass( 'disabled' )
 	
 	// if we have more than 1 series, lets fix the buttons (haven't inc'd num yet)
 	if( num > 0 ) {
-		// disable minus button and hide plus button in old div
+		// disable minus and plus button in 'active' row
 		last_div.find('#series-minus-but-'+num).addClass('disabled')
 		last_div.find('#series-minus-but-'+num).prop('disabled', true )
-		//remove completely this plus button so it draws correctly in the input group
-		last_div.find('#series-plus-div'+num).remove()
+		last_div.find('#series-plus-but-'+num).addClass('disabled')
+		last_div.find('#series-plus-but-'+num).prop('disabled', true )
 console.log( "reset buttons on last_div is=" + last_div.prop('id') )
 	}
 
@@ -134,9 +126,7 @@ console.log( "reset buttons on last_div is=" + last_div.prop('id') )
 	new_div.find('#bsl-book_id-NUM').prop('name', 'bsl-book_id-'+num )
 	new_div.find('#bsl-series_id-NUM').prop('name', 'bsl-series_id-'+num )
 	new_div.find('#bsl-book_num-NUM').prop('name', 'bsl-book_num-'+num )
-	new_div.find('#series-plus-div-NUM').prop('id', 'series-plus-div-'+num )
 	new_div.find('#series-plus-but-NUM').prop('id', 'series-plus-but-'+num )
-	new_div.find('#series-minus-div-NUM').prop('id', 'series-minus-div-'+num )
 	new_div.find('#series-minus-but-NUM').prop('id', 'series-minus-but-'+num )
 	new_div.find('#series-minus-but-'+num).attr('onclick', "RemoveBookFromSeries('series-div-"+num+"')" )
 
@@ -174,7 +164,8 @@ function RemoveBookFromSeries(sid) {
 		var num = parseInt( div.prop("id").match(/\d+/g), 10 );
 		div.find('#series-minus-but-'+num).removeClass('disabled')
 		div.find('#series-minus-but-'+num).prop('disabled', false )
-		div.append( SeriesButPlus( (num+1) ) )
+		div.find('#series-plus-but-'+num).removeClass('disabled')
+		div.find('#series-plus-but-'+num).prop('disabled', false )
 	}
 }
 
@@ -309,11 +300,9 @@ function AddAuthorToBook(num) {
 					{# empty-series-dev - filler -- we use 0 AND use that number to keep track of how many series divs for add/remove #}
 					<div id="series-div-0" class="form-row col mx-0 input-group" style="display:none">
 						<span class="form-control input-group-text bg-white"> </span>
-						<div id="series-plus-div-0" class="input-group-append">
-							<button id="series-plus-but-0" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()">
-								<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
-							</button>
-						</div>
+						<button id="series-plus-but-0" class="btn btn-outline-success input-group-append" type="button" onClick="AddBookToSeries()">
+							<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
+						</button>
 					</div id="series-div-0" class="form-row col mx-0 input-group">
 					{% for s in books.series %}
 						{% set hiddens.txt=hiddens.txt+"<input type='hidden' name='bsl-book_id-{}' value='{}'>".format(loop.index, books.id) %}
@@ -326,49 +315,41 @@ function AddAuthorToBook(num) {
 							{% else %}
 								{% set disabled="" %}
 							{% endif %}
-							<div id="series-minus-div-{{loop.index}}" class="input-group-prepend disabled" >
-								<button id="series-minus-but-{{loop.index}}" class="btn btn-outline-danger {{dsiabled}}" {{disabled}} type="button" 
+								<button id="series-minus-but-{{loop.index}}" class="btn btn-outline-danger input-group-prepend {{disabled}}" {{disabled}} type="button" 
 									onClick="RemoveBookFromSeries('series-div-{{loop.index}}')">
 									<svg width="22" height="22" fill="currentColor">
 										<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
 									</svg>
 								</button>
-							</div>
-							<div class="form-control input-group-text bg-white">
+							<span class="form-control input-group-text bg-white">
 								Book {{ SeriesBookNum( s.id, books.id ) }} of {{s.num_books}} in&nbsp; <a href=/series/{{s.id}}>{{s.title}}</a>
-							</div>
+							</span>
 						{% else %}
 							{% set hiddens.txt=hiddens.txt+"<input type='hidden' name='bsl-book_num-{}' value='PARENT'>".format(loop.index) %}
-							<div id="series-minus-div-{{loop.index}}" class="input-group-prepend">
-								<button id="series-minus-but-{{loop.index}}" class="btn btn-outline-danger" type="button" onClick="RemoveBookFromSeries('series-div-{{loop.index}}')">
-									<svg width="22" height="22" fill="currentColor">
-										<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
-									</svg>
-								</button>
-							</div>
-							<div class="form-control input-group-text bg-white">
+							<button id="series-minus-but-{{loop.index}}" class="btn btn-outline-danger input-group-prepend" type="button" onClick="RemoveBookFromSeries('series-div-{{loop.index}}')">
+								<svg width="22" height="22" fill="currentColor">
+									<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
+								</svg>
+							</button>
+							<span class="form-control input-group-text bg-white">
 								Contains books in&nbsp; <a href='/series/{{s.id}}'>{{s.title}}</a>
-							</div>
+							</span>
 						{% endif %}
+						<button id="series-plus-but-{{loop.index}}" class="btn btn-outline-success input-group-append {{disabled}}" {{disabled}} type="button" onClick="AddBookToSeries()">
+							<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
+						</button>
 						{% if books.series|length == loop.index %}
-							<div id="series-plus-div-{{loop.index}}" class="input-group-append">
-								<button id="series-plus-but-{{loop.index}}" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()">
-									<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
-								</button>
-							</div>
 						{% endif %}
 						</div id="series-div-{{loop.index}}">
 					{% endfor %}
 					{% set show_div_0 = 0 %}
 				{% else %}
 					{# empty-series-dev - filler -- we use 0 AND use that number to keep track of how many series divs for add/remove #}
-					<div id="series-div-0" class="form-row col mx-0 input-group">
+					<div id="series-div-0" class="col input-group">
 						<span class="form-control input-group-text bg-white"> </span>
-						<div id="series-plus-div-0" class="input-group-append">
-							<button id="series-plus-but-0" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()">
-								<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
-							</button>
-						</div>
+						<button id="series-plus-but-0" class="btn btn-outline-success input-group-append" type="button" onClick="AddBookToSeries()">
+							<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
+						</button>
 					</div id="series-div-0" class="form-row col mx-0 input-group">
 				{% endif %}
 			</div id="series_row">