jQuery/JavaScript on click, list ID's names

First off, my javascript is very limited so I wont try anything on my own on this one as I just cant think where to start

So, I have this structure in my website,

ul{list-style-type: none;padding:0}

<button class="clickme" type="button">Click Me!</button>

<ul>
 
    <li id="colors_body"><input type="text" class="color_input" value="ffffff"></li>
    <li id="colors_wrapper"><input type="text" class="color_input" value="000000"></li>
    <li id="colors_footer"><input type="text" class="color_input" value="575757"></li>
    
    <!--There will be at least 30-40 of elements like this that contains text input tags-->
    
    <!--And, this list arent always have Text inputs tags, there are also other tags for example, radio, select...etc-->
    <!-- <li id="radio-toggle"><input type="radio" class="radio_input" value="toggle"></li> -->
</ul>

<div class="list">

</div>

Basically, A bunch of li tags that each one have a specific ID and each of this list contains a text input tag that they have a class named color_input

So, With jQuery on clicking the clickme button I want to list all li ID names with their input values in a div
For example, on clicking the clickme button I want to get a list like this

'colors_body' => 'ffffff',  
'colors_wrapper' => '000000',  
'colors_footer' => '575757',  

EDIT: But I need to get a list that the text input tags used for colors only, this should be easy to map the list because this input tags have a specfic class named color_input The reason for that because there are other input types like radio, select...etc