Run loop function for all div with id (see scenario)

Run loop function for all div with id (see scenario)

Hi there, I'm new to coding with Jquery and have hit a roadblock when trying to get the following - which is intended for blogs/news sites- to work -

HTML -----

<div id ="house" >
 
      <div id="dog"></div>
      <div id="cat">
      <h1 id="food">text1</h1>
      </div>
</div">

<div id ="house" >
 
      <div id="dog"></div>
      <div id="cat">
      <h1 id="food">text2</h1>
      </div>
</div">

etc

------

JQUERY---

since i only know a little this is as far as i was able to get with jsfiddle

var a = $('#food').html();
var b = $('#dog').html(a);

------

using this im able to get the text ("text1") from inisde cat and copy pase it inside its parents adjacent element, dog.

since this is meant for a blog/news type site i need this to occur for every instance of house and also without messing with classes ideally, the only possible exception to classes being that of the h1 class.

secondly this needs to be able to copy any text from inside the h1 id of "cat", BUT apply certain css to certain values of text e.g. unqiue css for 'news' 'column title 2' etc - I'm familiar with css so I don't need it to do the css in jquery and would prefer if it would direct the certain unique values of text to appropriate css values.

please help as I've been stuck on this for days now with further jquery stuff to apply to the site still :(.