Fix double id on listings pages

[MAILPOET-3329]

assets/js/src/listing/listing.jsx

@@ -612,6 +612,7 @@ class Listing extends React.Component {
               />
               {extraActions}
               <ListingPages
+                position="top"
                 count={this.state.count}
                 page={this.state.page}
                 limit={this.state.limit}
@@ -664,6 +665,7 @@ class Listing extends React.Component {
           </table>
           <div className="mailpoet-listing-footer clearfix">
             <ListingPages
+              position="bottom"
               count={this.state.count}
               page={this.state.page}
               limit={this.state.limit}

assets/js/src/listing/pages.jsx

@@ -176,7 +176,7 @@ class ListingPages extends React.Component {
           <span className="mailpoet-listing-paging-input">
             <label
               className="screen-reader-text"
-              htmlFor="current-page-selector"
+              htmlFor={`current-page-selector-${this.props.position}`}
             >
               {MailPoet.I18n.t('currentPage')}
             </label>
@@ -189,7 +189,7 @@ class ListingPages extends React.Component {
               size="2"
               value={pageValue}
               name="paged"
-              id="current-page-selector"
+              id={`current-page-selector-${this.props.position}`}
               className="mailpoet-listing-current-page"
             />
             {MailPoet.I18n.t('pageOutOf')}
@@ -229,6 +229,7 @@ class ListingPages extends React.Component {
 }
 
 ListingPages.propTypes = {
+  position: PropTypes.string,
   onSetPage: PropTypes.func.isRequired,
   page: PropTypes.oneOfType([
     PropTypes.number,
@@ -238,6 +239,10 @@ ListingPages.propTypes = {
   limit: PropTypes.number.isRequired,
 };
 
+ListingPages.defaultProps = {
+  position: '',
+};
+
 /* type ArrowProps = {
   direction?: 'right',
   disabled?: boolean