JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="sel">
<input type="text" id="a0" class="sell-me" value="awesome" />
<input type="text" id="a1" class="sell-me" value="awesome1" />
<input type="text" id="a3" class="sell-me" value="awesome3" />
<input type="text" id="a9" class="sell-me" value="awesome9" />
</div>
<div class="button save-it">
Save me
</div>

JavaScript

(function(jQuery) {
	'use strict';
  
  window.DOER = {
  
  	saver:function(e){
    	e.preventDefault();
    	
      var sel = jQuery('.sel');
      
      var data = {};
      
      sel.find('.sell-me').each(function(){
      	//Shouldn't this show values one by one instead of all in one at once?
        console.dir(data);
      	data = window.DOER.grabber(jQuery(this), data);
      });
      console.dir(data);
    },
    
    grabber:function(el,data){
    
    	data[jQuery(el).attr('id')] = jQuery(el).val();
      
      return data;
    },
  
  	init:function(){
    	jQuery(document).on('click', '.save-it', this.saver);
    }
  };
	
}($));

$(document).ready(function(){
	window.DOER.init();
});