Newbie here.  I'm creating a form for Position account changes.  The left table (Current Pos. class="CurPos") is read-only and has the form-del-field and form-add-row buttons disabled.  The New Position table (class="NewPos") has the same data copied to it so the users can make changes there by either changing the funding source or adding/deleting rows.  Only the New Pos. data would flow to the next event.

Problem I'm having is getting the 'X' form-del-field buttons to appear next to the New Pos rows.  If I click on 'Add Row' they ALL appear until I delete one row then they all disappear again.

Does anyone have any ideas?  I've tried the default by removing the css to no avail.

.CurPos .cf-table-add-row {display:none!important}
.CurPos .form-del-field {display:none!important} 
.CurPos, .NewPos {table-layout: auto;width:45%;float:left;} 
.CurPos .cf-section-header {color: white; background-color: yellow;}
.NewPos .cf-section-header {color: white; background-color: lightgreen;}